/* ================================
   1. フォント
================================ */
@font-face {
  font-family: 'MaruMonica';
  src: url('fonts/x12y16pxMaruMonica.ttf') format('truetype');
  font-display: swap;
}

/* ================================
   2. 全体
================================ */
html {
  height: 100%;
}

body { 
  height: 100%;
  margin: 0; 
  background-color: #ffffff;
  font-family: 'MaruMonica'; 
  overflow: hidden; 
  background-image: url('images/09.webp');
}
noscript div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* ================================
   3. ツールバー
================================ */
.toolbar { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 24px; 
  display: flex; 
  align-items: center; 
  padding: 0 10px; 
  box-sizing: border-box; 
  color: #000000; 
  font-size: 16px;
  z-index: 2000; 
  background-color: #ffffff;
  box-shadow: 0 1.5px 0 #000000;
}

.toolbar-left { 
  display: flex; 
  align-items: center; 
  flex-shrink: 0; 
}

.toolbar-right { 
  display: flex; 
  align-items: center; 
  margin-left: auto; 
  white-space: nowrap; 
  flex-shrink: 1; 
  min-width: 0; 
  overflow: visible; 
  text-overflow: ellipsis; 
}

/* ================================
   4. スタートボタン / メニュー
================================ */
#startButton { 
  width: 32px;
  height: 20px;
  position: relative; 
  cursor: pointer; 
  background-image: url('icons/startbutton.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 2px;
  image-rendering: pixelated;
}

#startButton.active { 
  background-image: url('icons/startbutton_activ.webp');
  background-color: #000000; 
}

#startButton.active img { 
  filter: invert(100%); 
}

/* スタートメニュー */
#startMenu {
  position: absolute;
  top: 24px;
  left: 0px;
  display: none;
  flex-direction: column;
  min-width: 160px; 
  height: 24px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #000000; 
  background-color: #ffffff;
  box-shadow: 2px 2px 0 #000000;
  z-index: 9999;
}

#startMenu .menu-item {
  padding: 0 12px; 
  line-height: 22px;
  color: #000000;
  cursor: pointer;
}

#startMenu .menu-item:hover { 
  background-color: #000000; 
  color: #ffffff; 
}

/* ================================
   5. 言語メニュー
================================ */
#langButton {
  position: relative;
  height: 24px;
  padding: 0 6px;
  color: #000000;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}

#langButton.active {
  background-color: #000000;
  color: #ffffff;
}

#langMenu {
  position: absolute;
  top: 24px;
  left: 0;
  display: none;
  flex-direction: column;
  min-width: 60px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #000000;
  background-color: #ffffff;
  box-shadow: 2px 2px 0 #000000;
  z-index: 9999;
}

#langMenu .menu-item {
  height: 24px;
  line-height: 22px;
  padding: 0 12px;
  color: #000000;
  cursor: pointer;
}

#langMenu .menu-item:hover {
  background-color: #000000;
  color: #ffffff;
}

#dateDisplay,
#timeDisplay {
  padding: 0 6px;
}

/* ================================
   6. タスクバー
================================ */
.taskbar { 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 24px; 
  display: flex; 
  align-items: flex-end; 
  padding: 0 10px; 
  gap: 10px;
  box-sizing: border-box;
  background-color: #ffffff; 
  color: #000000;
  font-size: 16px;
  z-index: 2000; 
  box-shadow: 0 -1.5px 0 #000000;
}

#taskButtons { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex: 1; 
  overflow-x: auto; 
}

.taskbar button { 
  padding: 6px;
  background-color: #ffffff; 
  border: 1px solid #000000;
  border-bottom: none;
  cursor: pointer; 
  font-size: 0;
}

.taskbar button img { 
  width: 24px; 
  height: 24px; 
  display: block; 
}

.taskbar-right { 
  height: 100%;
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 16px;
}

/* ================================
   7. デスクトップ / アイコン
================================ */
.desktop {
  position: relative;
  width: 100%;
  height: calc(100% - 24px);
  padding-top: 24px;
  box-sizing: border-box;
}

.icon-group {
  display: flex;
  flex-direction: column;
  gap: 20px; /* アイコンの縦間隔 */
}

.top-group {
  width: fit-content;
  position: absolute;
  right: 0;
  margin: 20px 20px 0 0;
}

.bottom-group {
  width: fit-content;
  position: absolute;
  bottom: 0;
  margin: 0 0 30px 20px;
}

.icon { 
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer; 
  color: #000000; 
  image-rendering: pixelated;
}

.icon img { 
  display: block; 
  width: 64px; 
  height: 64px; 
}

.icon span { 
  display: block; 
  text-align: center;  
  font-size: 14px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  background-color: #ffffff;
  padding: 4px 2px;
}


/* ================================
   8. ウィンドウ
================================ */
.window { 
  position: absolute; 
  top: 100px; 
  left: 100px; 
  width: 400px; 
  height: 300px; 
  display: none; 
  flex-direction: column; 
  overflow: hidden; 
  background-color: #ffffff; 
  border: 1px solid #000000; 
  box-sizing: border-box;
  box-shadow: 2px 2px 0 #000000; 
  z-index: 100; 
  touch-action: none; 
}

.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 24px;
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
  border-bottom: 1px solid #000000;
  cursor: move;
  touch-action: none;
  overflow: hidden;
}

.titlebar .buttons { 
  position: absolute; 
  left: 5px; 
  display: flex; 
  gap: 2px; 
}

.titlebar .title-text { 
  flex: 1; 
  text-align: center; 
  pointer-events: none; 
}

.titlebar button { 
  width: 18px; 
  height: 18px; 
  border: none; 
  cursor: pointer; 
  background-color: #00000000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 0;
  image-rendering: pixelated;
}

.close-btn {
  background-image: url('icons/close.webp');
}

.min-btn {
  background-image: url('icons/min.webp');
}

.max-btn {
  background-image: url('icons/max.webp');
}

.content { 
  flex: 1; 
  font-size: 16px; 
}

.resize-handle { 
  position: absolute; 
  width: 16px; 
  height: 16px; 
  right: 0; 
  bottom: 0; 
  cursor: se-resize; 
  background-color: #0000004d; 
  z-index: 101; 
}

/* ================================
   9. レスポンシブ
================================ */
@media (max-width: 600px) {
  .desktop .icon { width: 50px; }
  .desktop .icon img { width: 40px; height: 40px; }
  .desktop .icon span { font-size: 12px; }
  .toolbar, .taskbar { height: 20px; font-size: 14px; padding: 0 8px; }
  .toolbar-left img.toolbar-icon { width: 16px; height: 16px; }
  .titlebar { height: 20px; min-height:20px ;font-size: 14px; }
  .titlebar button { width: 16px; height: 16px;}
  #startButton { width: 28px; height: 16px;}
  #startMenu { top: 20px; }
  #langButton { height: 20px; font-size: 14px; padding: 0 4px; }
  #langMenu { top: 20px; }
  #dateDisplay, #timeDisplay { padding: 0 4px; }
  .top-group { margin: 10px 10px 0 0; }
  .bottom-group { margin: 0 0 20px 10px; }
  .taskbar button { padding: 4px; }
  .taskbar-right { font-size: 12px; }
  .taskbar button img { width: 20px; height: 20px; }
  .desktop { padding: 20px 0 20px 0; }
}