/* ============================================================
   AceOS — stylesheet
   ------------------------------------------------------------
   Sections in this file:
   1. Fonts & color tokens
   2. Wallpaper (background layer)            <-- easy to swap
   3. Sakura petal animation
   4. Desktop icons
   5. Window chrome (title bar, buttons, body)
   6. Taskbar & Start menu
   7. Shared buttons / inputs
   8. Photobooth app
   9. Music Player app
   10. Contact app
   11. About / My Computer
   12. Shutdown overlay
   13. Scrollbar & responsive tweaks
   ============================================================ */

/* ---------- 1. Fonts & color tokens ---------- */
:root{
  --win-bg:#fffaf9;
  --win-border:#ffc2df;
  --panel:#fff1f8;
  --titlebar1:#ff9bce;
  --titlebar2:#a692ff;
  --titlebar-inactive1:#e6c8dc;
  --titlebar-inactive2:#cfc4ea;
  --accent:#ff6fa5;
  --accent2:#8a6bff;
  --text:#4a3b57;
  --text-soft:#7c6c88;
  --taskbar1:#ffd3ec;
  --taskbar2:#cdbdff;
  --heading-font:'Baloo 2', 'Trebuchet MS', sans-serif;
  --ui-font:'Quicksand', 'Trebuchet MS', sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  font-family:var(--ui-font);
  color:var(--text);
  user-select:none;
}

/* ============================================================
   2. WALLPAPER (background layer)
   ------------------------------------------------------------
   #wallpaper is a single full-screen layer sitting behind
   everything else (z-index:0). Right now it's a pastel gradient
   with soft "bokeh" dots. Swap it any time:

   A) Static image:
      #wallpaper{
        background: url('wallpaper.jpg') center / cover no-repeat;
      }

   B) Animated GIF:
      Same as above, just point url() at a .gif file.

   C) Animated video wallpaper:
      1. In index.html, put a <video> as the FIRST child inside
         #wallpaper, e.g.:
           <div id="wallpaper">
             <video autoplay muted loop playsinline>
               <source src="wallpaper.mp4" type="video/mp4">
             </video>
           </div>
      2. Add this rule below (uncomment it):
           #wallpaper video{
             position:absolute; inset:0; width:100%; height:100%;
             object-fit:cover;
           }
      3. Remove/comment out the "background" property in #wallpaper
         below so the video shows through instead of the gradient.

   D) Animated canvas / WebGL wallpaper:
      Put a <canvas id="wallpaper-canvas"> as the first child of
      #wallpaper (same as the video example), give it
      position:absolute; inset:0; width/height:100%, and drive it
      from script.js (see the "WALLPAPER HOOK" comment there).
   ============================================================ */
#wallpaper{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.65) 0 3px, rgba(255,255,255,0) 4px),
    radial-gradient(circle at 70% 8%, rgba(255,255,255,.55) 0 3px, rgba(255,255,255,0) 4px),
    radial-gradient(circle at 45% 30%, rgba(255,255,255,.4) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,0) 4px),
    radial-gradient(circle at 12% 70%, rgba(255,255,255,.4) 0 2px, rgba(255,255,255,0) 3px),
    linear-gradient(160deg, #ffe1ef, #e3d3ff 55%, #c7e6ff 120%);
  background-size: 160px 160px, 180px 180px, 140px 140px, 170px 170px, 130px 130px, cover;
}
/* #wallpaper video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } */

/* ---------- 3. Sakura petal animation ---------- */
#petals{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.petal{ position:absolute; top:-8%; font-size:16px; opacity:.85; animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform; }
@keyframes fall{
  0%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(24px,55vh) rotate(180deg); }
  100%{ transform:translate(-10px,115vh) rotate(360deg); }
}

/* ---------- 4. Desktop icons ---------- */
#desktop{
  position:absolute; inset:0; bottom:44px; z-index:2;
  padding:16px;
  display:flex; flex-direction:column; flex-wrap:wrap;
  gap:6px; align-content:flex-start;
}
.icon{
  width:84px; height:92px;
  display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:6px 2px;
  border-radius:12px;
  cursor:default;
}
.icon .glyph{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1;
  background:linear-gradient(160deg,#ffffff,#ffe4f2);
  border:2px solid #ffffff;
  box-shadow:0 3px 8px rgba(150,90,140,.35);
}
.icon .label{
  color:var(--text); font-size:11px; font-weight:600; text-align:center;
  background:rgba(255,255,255,.75);
  padding:2px 6px; border-radius:8px;
  max-width:100%;
}
.icon.selected{ background:rgba(255,255,255,.35); outline:2px dashed #fff; }
.icon.selected .label{ background:var(--accent); color:#fff; }

/* ---------- 5. Window chrome ---------- */
.window{
  position:absolute;
  background:var(--win-bg);
  min-width:260px;
  display:none;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  border:2px solid var(--win-border);
  box-shadow:0 12px 26px rgba(140,80,150,.28), 0 2px 8px rgba(140,80,150,.18);
}
.window.open{ display:flex; }
.titlebar{
  background:linear-gradient(90deg, var(--titlebar1), var(--titlebar2));
  color:#fff; font-family:var(--heading-font); font-weight:600; font-size:14px;
  padding:8px 8px 8px 12px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:move; gap:8px;
}
.window.inactive .titlebar{ background:linear-gradient(90deg, var(--titlebar-inactive1), var(--titlebar-inactive2)); }
.titlebar .t-title{ display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.titlebar .t-btns{ display:flex; gap:5px; flex-shrink:0; }
.tbtn{
  width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.35); border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; cursor:pointer; padding:0;
  transition:transform .12s, background .12s;
}
.tbtn:hover{ background:rgba(255,255,255,.6); transform:scale(1.1); }
.tbtn:active{ transform:scale(.9); }
.menubar{
  background:var(--panel); font-size:12px; padding:5px 10px; font-weight:600; color:var(--text-soft);
  display:flex; gap:14px; border-bottom:2px solid var(--win-border);
}
.menubar span{ cursor:default; }
.win-body{ flex:1; overflow:auto; padding:12px; background:var(--win-bg); font-size:13px; color:var(--text); }
.win-body.white{ background:#fffdfd; }
.statusbar{
  font-size:11px; padding:5px 10px; background:var(--panel);
  border-top:2px solid var(--win-border);
  display:flex; justify-content:space-between; color:var(--text-soft); font-weight:600;
}
.resize-handle{
  position:absolute; right:2px; bottom:2px; width:14px; height:14px; cursor:nwse-resize;
}

/* ---------- 6. Taskbar & Start menu ---------- */
#taskbar{
  position:absolute; left:0; right:0; bottom:0; height:44px;
  background:linear-gradient(90deg, var(--taskbar1), var(--taskbar2));
  border-top:2px solid #fff;
  display:flex; align-items:center; gap:8px; padding:5px 8px;
  z-index:5000;
  box-shadow:0 -3px 10px rgba(140,80,150,.2);
}
#start-btn{
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; font-weight:700; font-size:13px; font-family:var(--heading-font);
  background:#fff; border-radius:999px; cursor:pointer; color:var(--accent2);
  box-shadow:0 2px 6px rgba(140,80,150,.25);
  transition:transform .12s;
}
#start-btn:hover{ transform:translateY(-1px); }
#start-btn.active{ background:var(--accent2); color:#fff; }
#taskbar-items{ flex:1; display:flex; gap:6px; overflow:hidden; height:100%; align-items:center;}
.task-item{
  height:30px; padding:0 12px; background:rgba(255,255,255,.55);
  font-size:12px; font-weight:600; border-radius:999px; display:flex; align-items:center; gap:6px;
  cursor:pointer; max-width:170px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.task-item.active{ background:#fff; box-shadow:0 2px 6px rgba(140,80,150,.25); }
#ip-box, #clock{
  padding:6px 12px; font-size:11px; font-weight:700; min-width:56px; text-align:center;
  background:#fff; border-radius:999px; color:var(--text-soft);
}
#start-menu{
  position:absolute; left:6px; bottom:50px; width:220px;
  background:var(--win-bg); display:none; flex-direction:column;
  padding:6px; z-index:6000; border-radius:16px; overflow:hidden;
  border:2px solid var(--win-border);
  box-shadow:0 12px 26px rgba(140,80,150,.3);
}
#start-menu.open{ display:flex; }
#start-menu .banner{
  background:linear-gradient(180deg, var(--titlebar1), var(--titlebar2));
  color:#fff; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--heading-font); font-weight:700; font-size:15px; padding:10px 4px;
  position:absolute; left:6px; top:6px; bottom:6px; width:26px;
  border-radius:10px 0 0 10px;
}
#start-menu .items{ margin-left:30px; display:flex; flex-direction:column; }
#start-menu .item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); border-radius:10px;
}
#start-menu .item:hover{ background:var(--accent); color:#fff; }
#start-menu hr{ margin:6px 0; border:none; border-top:2px dashed var(--win-border); margin-left:30px;}

/* ---------- 7. Shared buttons / inputs ---------- */
button.os, select.os{
  font-family:var(--ui-font); font-weight:700; font-size:12px; padding:7px 14px;
  background:#fff; border:2px solid var(--win-border); border-radius:999px; cursor:pointer; color:var(--text);
  transition:transform .12s, background .12s;
}
button.os:hover:not(:disabled){ background:var(--panel); transform:translateY(-1px); }
button.os:active:not(:disabled){ transform:translateY(0); }
button.os:disabled{ color:#c3b7c9; cursor:default; opacity:.6; }
button.os.primary{ background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; }
input[type="range"]{ accent-color: var(--accent); }

/* ---------- 8. Photobooth app ---------- */
.pb-layout{ display:flex; gap:10px; height:100%; }
.pb-left{ width:156px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.pb-left fieldset{ border:2px solid var(--win-border); border-radius:12px; padding:8px; }
.pb-left legend{ font-size:11px; font-weight:700; padding:0 6px; color:var(--accent2); }
.frame-opt{ display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 0; cursor:pointer; }
.pb-right{ flex:1; display:flex; flex-direction:column; gap:8px; align-items:center; min-width:0; }
#cam-wrap{
  width:100%; max-width:340px; aspect-ratio:4/3; background:#2a2333; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; border:2px solid var(--win-border);
}
#cam-wrap video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
#cam-placeholder{ color:#cbb8dd; font-size:12px; text-align:center; padding:10px; }
#shots-row{ display:flex; gap:8px; }
.shot-thumb{
  width:64px; height:48px; background:#2a2333; border-radius:8px; border:2px solid var(--win-border);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#cbb8dd; cursor:pointer;
  background-size:cover; background-position:center;
}
.shot-thumb.filled{ border-color:var(--accent); }
#strip-canvas-wrap{ display:none; flex-direction:column; align-items:center; gap:8px; }
#stripCanvas{ max-width:180px; border-radius:8px; border:2px solid var(--win-border); }
.pb-save-row{ display:flex; gap:4px; width:100%; }
.pb-save-row select{ flex-shrink:0; width:74px; padding:7px 6px; }
.pb-save-row button{ flex:1; }

/* ---------- 9. Music Player app ---------- */
.mp-body{ display:flex; flex-direction:column; gap:8px; padding-top:2px; height:100%; }
#yt-wrap{ width:100%; aspect-ratio:16/9; background:#2a2333; border-radius:12px; overflow:hidden; flex-shrink:0; border:2px solid var(--win-border); }
#yt-wrap iframe{ width:100% !important; height:100% !important; border:none; display:block; }
#song-name{ font-size:13px; font-weight:700; text-align:center; color:var(--accent2); min-height:16px; }
.mp-controls{ display:flex; gap:6px; align-items:center; justify-content:center; }
.mp-controls button{ height:30px; font-size:12px; padding:0 12px; }
.mp-volume-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:0 4px; }
.mp-volume-row input[type="range"]{ flex:1; }
#playlist{ width:100%; border:2px solid var(--win-border); border-radius:10px; background:#fff; font-size:12px; flex:1; overflow:auto; min-height:60px; }
.pl-item{ padding:6px 10px; cursor:pointer; }
.pl-item.current{ background:var(--accent); color:#fff; font-weight:700; }

/* ---------- 10. Contact app ---------- */
.contact-badge{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px;
}
.contact-badge.ig{ background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }
.contact-badge.fb{ background:#1877f2; }
.contact-badge.wa{ background:#25d366; }
.contact-badge.em{ background:#ea4335; }
.contact-badge.gh{ background:#3a3148; }
.contact-list{ display:flex; flex-direction:column; gap:8px; }
.contact-item{
  display:flex; align-items:center; gap:10px; padding:9px;
  background:#fff; border:2px solid var(--win-border); border-radius:12px;
}
.contact-info{ flex:1; min-width:0; }
.contact-info .cname{ font-weight:700; font-size:13px; }
.contact-info .cdetail{ font-size:11px; color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-item button.os{ flex-shrink:0; }

/* ---------- 11. About / My Computer ---------- */
.about-box{ display:flex; gap:10px; }
.about-box .big-icon{ font-size:40px; }
ul.tight{ margin:6px 0; padding-left:20px; }
ul.tight li{ margin-bottom:5px; }

/* ---------- 12. Shutdown overlay ---------- */
#shutdown-overlay{
  position:fixed; inset:0; background:#2a2333; color:#f2e6ff;
  display:none; align-items:center; justify-content:center;
  font-family:var(--heading-font); font-size:16px; z-index:99999; text-align:center; cursor:pointer;
  letter-spacing:.3px;
}

/* ---------- 13. Scrollbar & responsive ---------- */
::-webkit-scrollbar{ width:14px; height:14px; }
::-webkit-scrollbar-track{ background:var(--panel); }
::-webkit-scrollbar-thumb{ background:var(--win-border); border-radius:8px; border:3px solid var(--panel); }

/* ============================================================
   14. Games (Whack-a-Mochi + Anime Snake)
   ============================================================ */
.game-panel{ display:flex; flex-direction:column; gap:10px; height:100%; }
.game-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.game-score{ font-size:12px; font-weight:700; color:var(--accent2); background:var(--panel); padding:4px 10px; border-radius:999px; }
.game-msg{ text-align:center; font-weight:700; color:var(--accent); min-height:18px; margin:0; }

/* Whack-a-Mochi */
#mochi-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.mochi-hole{
  position:relative; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #6b5240, #3a2b20 70%);
  box-shadow:inset 0 6px 10px rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; cursor:pointer;
}
.mochi-hole .mochi-char{
  font-size:30px; transform:translateY(120%); transition:transform .12s ease-out;
  user-select:none;
}
.mochi-hole.up .mochi-char{ transform:translateY(0%); }

/* Anime Snake */
#snake-canvas-wrap{ display:flex; justify-content:center; }
#snakeCanvas{
  width:100%; max-width:280px; height:auto; aspect-ratio:1;
  background:#eafbe0; border-radius:12px; border:2px solid var(--win-border);
}
#snake-dpad{ display:flex; flex-direction:column; align-items:center; gap:6px; }
#snake-dpad .dpad-row{ display:flex; gap:56px; }
.dpad-btn{ width:44px; height:44px; border-radius:12px; font-size:16px; padding:0; }

/* ---------- 15. Mobile / auto-scaling ---------- */
@media (max-width:700px){
  html{ font-size: clamp(13px, 3.6vw, 16px); }
  #taskbar{ height:48px; padding:4px 6px; }
  #start-btn{ padding:6px 10px; font-size:12px; }
  #start-btn span:last-child{ display:none; } /* keep just the icon on very small screens */
  .task-item span:last-child{ max-width:70px; overflow:hidden; text-overflow:ellipsis; }
  #ip-box{ display:none; } /* saves space on phones; still visible on desktop */
  .icon{ width:74px; height:86px; }
  .icon .glyph{ width:42px; height:42px; font-size:20px; }
  .pb-layout{ flex-direction:column; }
  .pb-left{ width:100%; flex-direction:row; flex-wrap:wrap; }
  .pb-left fieldset{ flex:1; min-width:140px; }
  .window{ border-radius:0; border-width:0 0 2px 0; } /* windows behave like full-screen app views on phones */
  .window .resize-handle{ display:none; }
  #snake-dpad .dpad-row{ gap:70px; }
}

@media (max-width:600px){
  .icon{ width:70px; }
}