/* ============================================================
   $CREB / you are the crab
   win98 chrome · boiled-crab palette · sideways-only desktop
   ============================================================ */

:root{
  --face:#c0c0c0;
  --hi:#ffffff;
  --sh:#808080;
  --dk:#000000;
  --ink:#0b0b0b;

  --raw:#5b7a8c;      /* stone cold */
  --boiled:#e0341a;   /* fully cooked */

  /* 0 = cold, 1 = boiling. driven by app.js */
  --boil:0;
  --accent: color-mix(in srgb, var(--raw), var(--boiled) calc(var(--boil) * 100%));

  --font: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  --mono: "Lucida Console", "Courier New", monospace;

  --ease: cubic-bezier(.22,.9,.28,1);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
  font-family:var(--font);
  font-size:13px;
  color:var(--ink);
  background:#081824;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ============ BOOT ============ */
#boot{
  position:fixed;inset:0;z-index:10000;
  background:#000;color:#c8c8c8;
  font-family:var(--mono);font-size:13px;
  padding:26px 30px;
  cursor:pointer;
  transition:opacity .45s ease;
}
#boot.is-done{opacity:0;pointer-events:none}
#boot-log{margin:0;white-space:pre-wrap;line-height:1.55}
#boot-log b{color:var(--boiled)}

/* ============ CRT ============ */
#crt{
  position:fixed;inset:0;z-index:7000;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply;
  opacity:.55;
}

/* ============ DESKTOP ============ */
#desktop{
  position:absolute;
  inset:0 0 34px 0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--sh) #0b1b28;
}
#desktop::-webkit-scrollbar{height:14px}
#desktop::-webkit-scrollbar-track{background:#0b1b28}
#desktop::-webkit-scrollbar-thumb{
  background:var(--face);
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}

/* parallax layers */
#bg-far,#bg-near{position:fixed;inset:0 0 34px 0;pointer-events:none;z-index:0}
#bg-far{
  background:
    radial-gradient(circle at 18% 28%, color-mix(in srgb,#0f2b3d 68%, var(--accent)) 0%, transparent 58%),
    radial-gradient(circle at 82% 74%, #0a1a28 0%, transparent 62%),
    linear-gradient(#0d2233, #071522);
  transition:background-color 1s linear;
}
#bg-near{
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px);
  opacity:.9;
}

#canvas{
  position:relative;z-index:1;
  /* width is set by syncCanvasWidth() so there is never dead space to scroll
     into; this is only the pre-JS floor */
  width:100%;
  height:100%;
  min-height:560px;
}

/* ============ WINDOW CHROME ============ */
.win{
  position:absolute;
  left:var(--x);top:var(--y);width:var(--w);
  background:var(--face);
  border:2px solid;
  border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:1px 1px 0 var(--sh), 5px 6px 22px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  /* never let a window run under the taskbar */
  max-height:calc(100% - 24px);

  /* entrance */
  opacity:0;
  transform:translateY(16px) scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.win.is-in{opacity:1;transform:none}
.win.is-min{display:none}
.win.is-closed{display:none}
.win.is-max{
  left:8px !important;top:8px !important;
  width:calc(100vw - 34px) !important;
  height:calc(100% - 26px);
}
.win.is-dragging{
  box-shadow:2px 2px 0 var(--sh), 14px 18px 40px rgba(0,0,0,.6);
  transition:none;
}

.win__bar{
  display:flex;align-items:center;gap:6px;
  padding:3px 3px 3px 7px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 88%, #000),
    color-mix(in srgb, var(--accent) 34%, #a8d6ee));
  color:#fff;cursor:grab;flex:0 0 auto;
  transition:background .8s linear;
}
.win.is-blur .win__bar{background:linear-gradient(90deg,#6b7a86,#aab5be)}
.win__bar:active{cursor:grabbing}
.win__title{
  flex:1;font-weight:700;font-size:12px;letter-spacing:.4px;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win__btns{display:flex;gap:2px}
.win__btns button{
  width:19px;height:17px;line-height:1;padding:0;
  font-family:var(--font);font-size:11px;font-weight:700;
  background:var(--face);color:#000;cursor:pointer;
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  transition:filter .12s;
}
.win__btns button:hover{filter:brightness(1.09)}
.win__btns button:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}

.win__body{padding:12px;overflow:auto;background:var(--face);flex:1 1 auto;overscroll-behavior:contain}
.win__body::-webkit-scrollbar{width:14px}
.win__body::-webkit-scrollbar-track{background:#dcdcdc}
.win__body::-webkit-scrollbar-thumb{
  background:var(--face);border:2px solid;
  border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}

/* ============ MAIN ============ */
.win__body--main{text-align:center}
.crab-wrap{position:relative;display:inline-block}
#crab{
  width:220px;max-width:72%;height:auto;display:block;margin:0 auto;
  /* creb is canonically red = cooked. a cold tape drains him grey. */
  filter:
    grayscale(calc(1 - var(--boil)))
    saturate(calc(.85 + var(--boil) * 1.05))
    brightness(calc(.92 + var(--boil) * .16));
  transition:filter 1.3s ease;
  animation:sidle 7s ease-in-out infinite;
}
@keyframes sidle{
  0%,100%{transform:translateX(-10px) rotate(-1.2deg)}
  50%    {transform:translateX(10px)  rotate(1.2deg)}
}
#crab-steam{
  position:absolute;left:50%;top:-6px;width:120px;height:70px;
  transform:translateX(-50%);
  pointer-events:none;opacity:calc(var(--boil) * .85);
  background:
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 62% 60%, rgba(255,255,255,.45) 0 5px, transparent 6px),
    radial-gradient(circle at 46% 30%, rgba(255,255,255,.35) 0 4px, transparent 5px);
  filter:blur(3px);
  animation:steam 3.4s linear infinite;
}
@keyframes steam{
  0%  {transform:translate(-50%,6px) scale(.9); opacity:0}
  35% {opacity:calc(var(--boil) * .85)}
  100%{transform:translate(-50%,-30px) scale(1.35); opacity:0}
}

.wordmark{
  position:relative;
  font-size:46px;margin:6px 0 2px;letter-spacing:2px;
  color:var(--accent);
  text-shadow:2px 2px 0 #fff, 3px 3px 0 var(--sh);
  transition:color .8s linear;
}
.tagline{margin:8px 0 14px;line-height:1.6;font-size:13px}
.tagline b{color:var(--accent)}

.ca{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:#fff;padding:7px;margin-bottom:12px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.ca__label{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:.5px}
#ca-text{font-family:var(--mono);font-size:11px;word-break:break-all;user-select:all;flex:1;min-width:150px}
.socials{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.socials .btn{text-align:center}

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--font);font-size:12px;
  padding:5px 12px;background:var(--face);color:#000;text-decoration:none;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  cursor:pointer;display:inline-block;
  transition:filter .12s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk);padding:6px 11px 4px 13px}
.btn--primary{font-weight:700;color:var(--accent)}
.btn.is-off{opacity:.42;pointer-events:none}

/* ============ BOIL METER ============ */
.pot{
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  background:#06131d;margin-bottom:10px;line-height:0;
}
#pot-canvas{width:100%;height:auto;display:block}

.temp{text-align:center;font-family:var(--mono);line-height:1;margin-top:4px}
#temp-val{font-size:56px;font-weight:700;color:var(--accent);transition:color .8s linear}
.temp__unit{font-size:23px;color:var(--accent)}

.thermo{
  height:22px;margin:9px 0 5px;background:#fff;padding:2px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.thermo__fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#4a6b7d,#39b4d8,#f0c419,#ec6b1f,#e0341a);
  background-size:400px 100%;
  transition:width 1.1s var(--ease);
}
.boil-status{
  text-align:center;font-weight:700;letter-spacing:2.5px;margin:2px 0 12px;
  font-size:12px;color:var(--accent);transition:color .8s linear;
}

.grad{margin-bottom:12px}
.grad__head{display:flex;justify-content:space-between;font-size:11px;color:#444;margin-bottom:3px}
.grad__track{
  height:14px;background:#fff;padding:2px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.grad__fill{
  height:100%;width:0%;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px, color-mix(in srgb,var(--accent) 55%, #fff) 8px 12px);
  transition:width 1.1s var(--ease);
}

.stats{width:100%;border-collapse:collapse;font-size:12px}
.stats th,.stats td{padding:4px 6px;border:1px solid var(--sh);background:#fff;text-align:left}
.stats th{background:#e6e6e6;width:44%;font-weight:400;color:#444}
.stats td{font-family:var(--mono)}
.stats td.up{color:#0a8f3c}
.stats td.down{color:#c22}
.stats td.muted{color:#8a8a8a;font-style:italic;font-family:var(--font);font-size:11px}

/* pre-launch: drain the meter so nothing looks like real data */
body.is-pending .thermo__fill,
body.is-pending .grad__fill{opacity:.3}
body.is-pending #temp-val,
body.is-pending .temp__unit{color:#8a8a8a}
body.is-pending .boil-status{color:#8a8a8a;font-size:11px;letter-spacing:1.5px}
body.is-pending #pot-canvas{opacity:.55;filter:grayscale(.7)}
body.is-pending #chart-canvas{opacity:.45;filter:grayscale(.8)}

.ca__badge{
  font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 6px;border:1px solid;font-weight:700;
}
.ca__badge.is-pending{background:#ffe9a8;border-color:#b8901f;color:#7a5c00}
.ca__badge.is-live{background:#c8f0d2;border-color:#1f8b3f;color:#0a5c22}
.fineprint{font-size:11px;color:#555;margin:10px 0 0;line-height:1.55}

/* ============ LORE DOC ============ */
.doc{
  background:#fff;padding:18px 20px;user-select:text;line-height:1.68;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.doc h2{margin:0 0 2px;font-size:19px;letter-spacing:-.2px}
.doc h3{
  margin:22px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:2px;
  color:var(--accent);transition:color .8s linear;
}
.doc p{margin:0 0 12px;font-size:13px}
.doc__lead{font-size:17px;font-weight:700;color:var(--accent);margin-bottom:14px !important;transition:color .8s linear}
.doc hr{border:none;border-top:1px solid #d0d0d0;margin:16px 0}
.doc b{color:#000}
.doc__sig{font-family:var(--mono);font-size:11.5px;color:#555;line-height:1.85;margin:0 !important}
.doc__sig b{color:var(--accent)}

/* ============ BUCKET / CHART ============ */
.bucket,.chart{
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  background:#0a1a26;line-height:0;margin-bottom:8px;
}
#bucket-canvas,#chart-canvas{width:100%;height:auto;display:block}

/* ============ MEMES ============ */
.memegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.memegrid img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:pointer;
  background:#fff;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  transition:transform .22s var(--ease), outline-color .15s;
  outline:2px solid transparent;outline-offset:-2px;
}
.memegrid img:hover{transform:scale(1.045);outline-color:var(--accent);position:relative;z-index:2}

#lightbox{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;gap:14px;
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
#lightbox.is-hidden{display:none}
#lb-img{max-width:82vw;max-height:82vh;border:3px solid var(--face)}
.lb__nav,.lb__close{
  font-family:var(--font);background:var(--face);color:#000;cursor:pointer;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.lb__nav{width:42px;height:58px;font-size:26px}
.lb__nav:active,.lb__close:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
.lb__close{position:absolute;top:18px;right:18px;width:32px;height:28px;font-size:13px}

/* ============ PFP ============ */
.pfp-stage{
  background:conic-gradient(#d6d6d6 0 25%, #eee 0 50%, #d6d6d6 0 75%, #eee 0) 0 0/20px 20px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  margin-bottom:10px;line-height:0;
}
#pfp-canvas{width:100%;height:auto;display:block}

.pfp-tabs{display:flex;gap:3px;margin-bottom:-2px;position:relative;z-index:2}
.tab{
  font-family:var(--font);font-size:12px;padding:5px 15px;cursor:pointer;
  background:#adadad;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  border-bottom:none;
}
.tab.is-on{background:var(--face);font-weight:700;padding-bottom:7px}

.tray{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
  gap:5px;max-height:250px;overflow-y:auto;padding:7px;background:#fff;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  margin-bottom:10px;
  overscroll-behavior:contain;
}
.tray.is-hidden{display:none}
.swatch{
  aspect-ratio:1;cursor:pointer;padding:0;
  background:#f5f5f5 center/contain no-repeat;
  border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#777;
  transition:transform .14s var(--ease);
}
.swatch:hover{border-color:var(--sh);transform:scale(1.07)}
.swatch.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 2px #fff}
.pfp-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

/* ============ SCROLL HINT ============ */
#scroll-hint{
  position:fixed;right:16px;bottom:46px;z-index:500;
  color:#cfe6f5;font-size:11px;letter-spacing:1px;
  text-shadow:1px 1px 0 #000;pointer-events:none;
  transition:opacity .5s;
  animation:nudge 2.4s ease-in-out infinite;
}
#scroll-hint span{color:var(--accent);font-weight:700}
#scroll-hint.is-gone{opacity:0}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ============ START HINT ============ */
#start-hint{
  position:fixed;left:14px;bottom:44px;z-index:820;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  color:var(--boiled);
  opacity:0;transform:translateY(10px);
  pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
#start-hint.is-on{opacity:1;transform:none}
#start-hint.is-gone{opacity:0 !important;transform:translateY(8px) !important}
.start-hint__bubble{
  background:#fffbe8;color:#1a1a1a;
  padding:8px 12px;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  font-size:12px;line-height:1.4;
  display:flex;flex-direction:column;
  max-width:250px;
}
.start-hint__bubble b{color:var(--boiled)}
.start-hint__bubble span{color:#555;font-size:11px}
.start-hint__arrow{
  margin-left:14px;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35));
  animation:point 1.5s ease-in-out infinite;
}
@keyframes point{
  0%,100%{transform:translateY(-5px)}
  50%    {transform:translateY(4px)}
}
@media (max-width:900px){ #start-hint{display:none} }

/* ============ TASKBAR ============ */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:34px;z-index:800;
  display:flex;align-items:center;gap:5px;padding:3px 5px;
  background:var(--face);border-top:2px solid var(--hi);
}
#start{
  display:flex;align-items:center;gap:5px;
  font-family:var(--font);font-weight:700;font-size:12px;
  padding:3px 10px 3px 5px;background:var(--face);cursor:pointer;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
#start img{width:17px;height:17px;object-fit:contain}
#start.is-on,#start:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}

#startmenu{
  position:fixed;left:5px;bottom:36px;z-index:850;width:206px;
  background:var(--face);padding:3px;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow:3px -3px 14px rgba(0,0,0,.45);
}
#startmenu.is-hidden{display:none}
#startmenu button{
  display:block;width:100%;text-align:left;
  font-family:var(--font);font-size:12px;padding:7px 10px;
  background:none;border:none;cursor:pointer;
}
#startmenu button:hover{background:var(--accent);color:#fff}

#tasks{display:flex;gap:4px;flex:1;overflow:hidden}
.taskbtn{
  font-family:var(--font);font-size:11px;padding:4px 9px;cursor:pointer;
  background:var(--face);max-width:148px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
}
.taskbtn.is-active{
  border-color:var(--dk) var(--hi) var(--hi) var(--dk);
  background:repeating-linear-gradient(45deg,#d6d6d6 0 2px,#bcbcbc 2px 4px);
  font-weight:700;
}
#tray{
  display:flex;align-items:center;gap:8px;padding:3px 9px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.tray__btn{font-family:var(--font);font-size:11px;background:none;border:none;cursor:pointer;padding:0}
#clock{font-size:11px;font-variant-numeric:tabular-nums}

/* ============ MOBILE ============ */
@media (max-width:900px){
  body{overflow:auto}
  #desktop{position:static;inset:auto;overflow:visible;padding:10px 10px 48px}
  #bg-far,#bg-near{position:fixed;inset:0}
  #canvas{width:100%;height:auto;display:flex;flex-direction:column;gap:14px}
  .win{position:static !important;width:100% !important;max-height:none;transform:none}
  .win.is-max{width:100% !important;height:auto}
  .win__bar{cursor:default}
  #scroll-hint{display:none}
  .wordmark{font-size:34px}
  .memegrid{grid-template-columns:repeat(2,1fr)}
  #crt{opacity:.3}

  /* taskbar: window buttons are useless when everything is stacked */
  #tasks{display:none}
  #start{flex:0 0 auto}
  #tray{margin-left:auto}
  #taskbar{gap:8px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .win{opacity:1;transform:none}
}