/* =========================================================================
   FLAPPY OS — a pixel desktop shell
   Chrome is deliberately grey-and-navy 16-bit desktop; the game window keeps
   its own arcade palette. Every border is a 4-step bevel drawn with inset
   shadows, so there are no extra elements and nothing anti-aliases.
   ========================================================================= */

:root{
  --face:      #c0c0c0;
  --face-lt:   #dfdfdf;
  --face-hi:   #ffffff;
  --face-sh:   #808080;
  --face-dk:   #0a0a0a;
  --title-a1:  #16215c;
  --title-a2:  #2f7fd0;
  --title-i1:  #6e7681;
  --title-i2:  #a9b0b8;
  --field:     #1b2a33;
  --field-txt: #cdf3ff;
  --desk:      #64c2de;
  --taskbar-h: 42px;
}

/* bevels ---------------------------------------------------------------- */
.bv-out{
  box-shadow:
    inset  1px  1px 0 0 var(--face-hi),
    inset -1px -1px 0 0 var(--face-dk),
    inset  2px  2px 0 0 var(--face-lt),
    inset -2px -2px 0 0 var(--face-sh);
}
.bv-in{
  box-shadow:
    inset  1px  1px 0 0 var(--face-dk),
    inset -1px -1px 0 0 var(--face-hi),
    inset  2px  2px 0 0 var(--face-sh),
    inset -2px -2px 0 0 var(--face-lt);
}
.bv-out:active,
.bv-press{
  box-shadow:
    inset  1px  1px 0 0 var(--face-dk),
    inset -1px -1px 0 0 var(--face-hi),
    inset  2px  2px 0 0 var(--face-sh),
    inset -2px -2px 0 0 var(--face-lt);
}

/* =========================================================================
   DESKTOP
   ========================================================================= */
#os{
  position:fixed; inset:0;
  overflow:hidden;
  background:var(--desk);
  user-select:none;
  -webkit-user-select:none;
}

#desktop{
  position:absolute; inset:0 0 var(--taskbar-h) 0;
  background:var(--desk) url('../assets/ui/wallpaper.png') no-repeat center bottom / cover;
  image-rendering:pixelated;
}
#desktop.solid{ background-image:none; background-color:#2c6b86 }
#desktop.teal{ background-image:none; background-color:#0c7a72 }

#deskIcons{ position:absolute; inset:0; pointer-events:none }
.dicon{
  position:absolute; left:10px; top:10px;
  pointer-events:auto;
  touch-action:none;
  width:92px; padding:8px 4px 7px;
  background:none; border:0; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:pointer;
  color:#fff;
  font-size:7px; line-height:1.5; letter-spacing:.5px; text-align:center;
  text-shadow:1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.dicon img{ width:64px; height:64px; image-rendering:pixelated }
.dicon .lbl{ padding:2px 4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dicon:hover .lbl{ background:rgba(22,33,92,.55) }
.dicon.active .lbl{ background:var(--title-a1); outline:1px dotted #fff; outline-offset:-1px }
.dicon:focus-visible{ outline:2px dotted #fff; outline-offset:-2px }
.dicon.dragging{ opacity:.6; cursor:grabbing; z-index:30 }
.dicon.dragging .lbl{ background:var(--title-a1) }

/* =========================================================================
   WINDOWS
   ========================================================================= */
.win{
  position:absolute;
  display:none;
  flex-direction:column;
  background:var(--face);
  padding:3px;
  min-width:220px;
}
.win.open{ display:flex }
.win.max{ inset:0 !important; width:auto !important; height:auto !important }

.win-bar{
  display:flex; align-items:center; gap:6px;
  height:26px; padding:0 3px 0 4px;
  background:linear-gradient(90deg, var(--title-i1), var(--title-i2));
  color:#e6e6e6;
  cursor:default;
  flex:0 0 auto;
}
.win.focus .win-bar{
  background:linear-gradient(90deg, var(--title-a1), var(--title-a2));
  color:#fff;
}
.win-bar img{ width:16px; height:16px; image-rendering:pixelated }
.win-title{
  flex:1; min-width:0;
  font-size:8px; letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.win-btns{ display:flex; gap:2px }
.wb{
  width:20px; height:18px;
  background:var(--face); border:0; padding:0;
  font:inherit; font-size:8px; color:#000;
  display:grid; place-items:center;
  cursor:pointer;
}
.wb span{ display:block; width:8px; height:8px; position:relative }
.wb.min span{ height:2px; background:#000; margin-top:5px }
.wb.max span{ border:2px solid #000; border-top-width:3px }
.wb.cls span::before, .wb.cls span::after{
  content:''; position:absolute; left:0; top:3px; width:8px; height:2px; background:#000;
}
.wb.cls span::before{ transform:rotate(45deg) }
.wb.cls span::after{ transform:rotate(-45deg) }

.win-body{
  flex:1; min-height:0;
  background:var(--face);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.win-pad{ padding:12px; overflow:auto; flex:1; min-height:0 }

/* the game window is chrome-free inside */
#win-game .win-body{ background:#64c2de; padding:0 }

/* =========================================================================
   TASKBAR
   ========================================================================= */
#taskbar{
  position:absolute; left:0; right:0; bottom:0;
  height:var(--taskbar-h);
  background:var(--face);
  display:flex; align-items:center; gap:4px;
  padding:3px 4px;
  z-index:9000;
}
#startBtn{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 9px 0 6px;
  background:var(--face); border:0; font:inherit;
  font-size:8px; letter-spacing:.5px; color:#000;
  cursor:pointer; flex:0 0 auto;
}
#startBtn img{ width:16px; height:16px; image-rendering:pixelated }

.tdivider{ width:2px; height:26px; box-shadow:inset 1px 0 0 var(--face-sh), inset -1px 0 0 var(--face-hi); flex:0 0 auto }

#tasks{ flex:1; display:flex; gap:4px; min-width:0; overflow:hidden }
.task{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 8px;
  max-width:190px; min-width:0;
  background:var(--face); border:0; font:inherit;
  font-size:7px; letter-spacing:.5px; color:#000;
  cursor:pointer;
}
.task img{ width:16px; height:16px; image-rendering:pixelated; flex:0 0 auto }
.task span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.task.on{
  box-shadow:
    inset  1px  1px 0 0 var(--face-dk), inset -1px -1px 0 0 var(--face-hi),
    inset  2px  2px 0 0 var(--face-sh), inset -2px -2px 0 0 var(--face-lt);
  background-image:repeating-conic-gradient(var(--face-lt) 0% 25%, var(--face) 0% 50%);
  background-size:2px 2px;
}

#tray{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 8px;
  flex:0 0 auto;
}
.tray-btn{
  width:22px; height:20px;
  background:none; border:0; padding:0;
  display:grid; place-items:center;
  cursor:pointer;
}
.tray-btn img{ width:16px; height:16px; image-rendering:pixelated }
.tray-btn.off img{ opacity:.35 }
.tray-btn.off::after{
  content:''; position:absolute; width:18px; height:2px;
  background:#c0392b; transform:rotate(-30deg);
}
.tray-btn{ position:relative }
#clock{ font-size:7px; letter-spacing:.5px; color:#000; font-variant-numeric:tabular-nums }

/* =========================================================================
   START MENU
   ========================================================================= */
#start{
  position:absolute; left:4px; bottom:var(--taskbar-h);
  width:236px;
  background:var(--face);
  padding:3px;
  display:none;
  z-index:9500;
}
#start.open{ display:flex }
.start-rail{
  width:26px; flex:0 0 auto;
  background:linear-gradient(180deg, var(--title-a2), var(--title-a1));
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:10px;
}
.start-rail span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9px; color:#fff; letter-spacing:2px;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.start-list{ flex:1; display:flex; flex-direction:column; padding:3px }
.sitem{
  display:flex; align-items:center; gap:10px;
  padding:9px 8px;
  background:none; border:0; font:inherit;
  font-size:8px; letter-spacing:.5px; color:#000;
  cursor:pointer; text-align:left; width:100%;
}
.sitem img{ width:32px; height:32px; image-rendering:pixelated }
.sitem:hover, .sitem:focus-visible{ background:var(--title-a1); color:#fff; outline:none }
.srule{ height:2px; margin:3px 4px; box-shadow:inset 0 1px 0 var(--face-sh), inset 0 -1px 0 var(--face-hi) }

/* ---------- first-run hint balloon ---------- */
#hint-bubble{
  position:absolute; left:104px; top:30px;
  z-index:40;
  padding:9px 11px;
  background:#ffffe1; color:#000;
  border:1px solid #000;
  font-size:7px; line-height:1.9; letter-spacing:.5px;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  pointer-events:none;
  animation:hb 2.4s ease-in-out infinite;
}
#hint-bubble[hidden]{ display:none }
.hb-arrow{
  position:absolute; left:-6px; top:14px;
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-right:6px solid #000;
}
@keyframes hb{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(-4px) } }

/* =========================================================================
   APP CONTENT
   ========================================================================= */
.app{ font-size:8px; color:#000; line-height:1.9; letter-spacing:.5px }
.app h3{
  font-size:9px; margin:0 0 10px;
  color:var(--title-a1); letter-spacing:1px;
}
.app h3 + p{ margin-top:-4px }
.app p{ margin:0 0 12px; line-height:2 }
.group{
  padding:12px; margin-bottom:12px;
  background:var(--face);
}
.group > .legend{
  display:block; margin:-4px 0 10px;
  font-size:8px; color:var(--title-a1); letter-spacing:1px;
}
.field{
  background:var(--field); color:var(--field-txt);
  padding:10px;
  font-size:8px; line-height:1.9;
  word-break:break-all;
  user-select:text; -webkit-user-select:text;
  font-variant-numeric:tabular-nums;
}
.field.empty{ color:#7d95a1 }

.pbtn{
  font:inherit; font-size:8px; letter-spacing:.5px;
  background:var(--face); color:#000;
  border:0; padding:10px 14px;
  cursor:pointer; min-width:96px;
}
.pbtn[disabled]{ color:var(--face-sh); text-shadow:1px 1px 0 var(--face-hi); cursor:default }
.pbtn[disabled]:active{ box-shadow:
  inset 1px 1px 0 0 var(--face-hi), inset -1px -1px 0 0 var(--face-dk),
  inset 2px 2px 0 0 var(--face-lt), inset -2px -2px 0 0 var(--face-sh) }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }

.setrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 0;
}
.setrow + .setrow{ box-shadow:inset 0 1px 0 var(--face-sh) }
.setrow .k{ flex:1 }
.toggle{
  font:inherit; font-size:7px; letter-spacing:1px;
  background:var(--face); color:#000;
  border:0; padding:8px 0; width:74px; cursor:pointer;
}
.toggle.on{ background:#2f7fd0; color:#fff }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:120px; height:16px; background:none; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:8px; background:var(--field);
  box-shadow:inset 1px 1px 0 0 var(--face-dk), inset -1px -1px 0 0 var(--face-hi);
}
input[type=range]::-moz-range-track{
  height:8px; background:var(--field);
  box-shadow:inset 1px 1px 0 0 var(--face-dk), inset -1px -1px 0 0 var(--face-hi);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:20px; margin-top:-6px;
  background:var(--face);
  box-shadow:
    inset  1px  1px 0 0 var(--face-hi), inset -1px -1px 0 0 var(--face-dk),
    inset  2px  2px 0 0 var(--face-lt), inset -2px -2px 0 0 var(--face-sh);
}
input[type=range]::-moz-range-thumb{
  width:12px; height:20px; border:0; border-radius:0;
  background:var(--face);
  box-shadow:
    inset  1px  1px 0 0 var(--face-hi), inset -1px -1px 0 0 var(--face-dk),
    inset  2px  2px 0 0 var(--face-lt), inset -2px -2px 0 0 var(--face-sh);
}

.swatches{ display:flex; gap:8px }
.swatch{ width:38px; height:26px; border:0; cursor:pointer; padding:0; background-size:cover }
.swatch.on{ outline:2px solid var(--title-a2); outline-offset:2px }

.note{ font-size:7px; color:#4a4a4a; line-height:2 }
.ok{ color:#1d6b2f }

/* ---------- leaderboard ---------- */
.board{ display:flex; flex-direction:column; height:100%; gap:9px }
.board-head{
  display:flex; justify-content:space-between; gap:10px;
  font-size:7px; color:#3b3b3b; letter-spacing:.5px;
}
.board-head b{ color:var(--title-a1); font-variant-numeric:tabular-nums }

.board-list{
  flex:1; min-height:130px;
  overflow-y:auto; overflow-x:hidden;
  background:var(--field);
  padding:6px;
  scrollbar-width:thin; scrollbar-color:var(--alt-shadow) transparent;
}
.board-list::-webkit-scrollbar{ width:8px }
.board-list::-webkit-scrollbar-thumb{ background:var(--alt-shadow) }

.bitem + .bitem{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07) }
.brow{
  width:100%;
  display:grid; grid-template-columns:30px 1fr auto;
  gap:8px; align-items:center;
  padding:6px;
  font:inherit; font-size:8px; color:var(--field-txt);
  letter-spacing:.5px;
  background:none; border:0; cursor:pointer;
  text-align:left;
}
.brow:hover{ background:rgba(255,255,255,.06) }
.bitem.me .brow{ background:#2c5a2f; color:#dcffd2 }
.bitem.me .brow .rk{ color:#a8e59a }
.bitem:nth-child(1) .rk{ color:#ffcf3f }
.bitem:nth-child(2) .rk{ color:#d8dee3 }
.bitem:nth-child(3) .rk{ color:#e0a26a }

.bwallet{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px 9px 44px;
  background:rgba(0,0,0,.28);
}
.bwallet[hidden]{ display:none }
.bwallet code{
  flex:1; min-width:0;
  font:inherit; font-size:6px; line-height:1.9;
  color:#9fe0ff; word-break:break-all;
  user-select:text; -webkit-user-select:text;
}
.wcopy{
  flex:0 0 auto;
  font:inherit; font-size:6px; letter-spacing:1px;
  padding:6px 8px; cursor:pointer;
  color:#0d1519; background:var(--gold);
  border:0;
}
.brow .rk{ color:#7fa6b8; font-variant-numeric:tabular-nums }
.brow .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.brow .sc{ font-variant-numeric:tabular-nums; color:#fff }
.board-empty{ padding:14px 8px; font-size:7px; color:#7d95a1; line-height:2 }

.board-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:7px; color:#3b3b3b;
}
.board-foot .pbtn{ min-width:0; padding:8px 12px }
#bdYou{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:640px){
  :root{ --taskbar-h:40px }
  #deskIcons{ gap:2px }
  .dicon{ width:78px; font-size:6px; padding:6px 2px 8px; gap:6px }
  .dicon img{ width:48px; height:48px }
  #start{ width:min(240px, calc(100vw - 8px)) }
  .task span{ display:none }
  .task{ padding:0 8px }
  #startBtn{ padding:0 7px 0 5px; font-size:7px; gap:4px }
  .win-title{ font-size:7px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}