/* MUAMUAE CONSOLE — 심야 보드게임 캐비닛
   스위치 홈 화면의 뼈대(가로 타일 열 · 키보드 내비 · 하단 버튼 힌트)에
   이 리포가 이미 쓰는 베이즈 그린 + 브래스 팔레트를 입혔다.
   폰트는 전부 Windows 내장 — 오프라인에서도 의도한 그대로 나와야 하므로. */

:root{
  --baize:      #0b1c19;
  --baize-2:    #061210;
  --felt:       #12332c;
  --brass:      #c08a2d;
  --brass-2:    #e6b862;
  --ink:        #ece7d7;
  --ink-2:      #c3c8bf;
  --muted:      #8a9d95;
  --faint:      #63776f;
  --line:       rgba(224,173,85,.20);
  --line-soft:  rgba(236,231,215,.09);

  --ok:   #58d68d;
  --warn: #e6b862;
  --bad:  #e0685f;
  --live: #55d3e0;

  /* JS가 선택된 게임에 맞춰 갈아끼운다 */
  --accent:     #c08a2d;
  --accent-rgb: 192,138,45;

  --ff-display: "Bahnschrift","DIN Alternate","Segoe UI Semibold",sans-serif;
  --ff-body:    "Malgun Gothic","Segoe UI",sans-serif;
  --ff-mono:    "Cascadia Mono","Cascadia Code",Consolas,monospace;

  --ease-pop: cubic-bezier(.22,.96,.30,1.18);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; overflow:hidden;
  background:var(--baize-2);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

.cabinet{
  position:fixed; inset:0;
  display:grid; grid-template-rows:auto 1fr auto;
  isolation:isolate;
}

/* ── 배경 레이어 ───────────────────────────────────────────── */

.lamp{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -18%,
      rgba(var(--accent-rgb),.30) 0%,
      rgba(var(--accent-rgb),.10) 34%,
      transparent 66%),
    radial-gradient(90% 70% at 50% 118%,
      rgba(var(--accent-rgb),.11) 0%, transparent 60%),
    linear-gradient(178deg, var(--felt) 0%, var(--baize) 42%, var(--baize-2) 100%);
  transition:background 620ms cubic-bezier(.4,0,.2,1);
}
.felt{
  position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(38deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, transparent 52%, rgba(0,0,0,.62) 100%);
}

/* ── 상·하단 레일 ─────────────────────────────────────────── */

.rail{
  display:flex; align-items:center; gap:18px;
  padding:0 30px; height:62px; position:relative;
  animation:railIn .7s var(--ease-pop) both;
}
.rail--top{border-bottom:1px solid var(--line);}
.rail--bottom{
  border-top:1px solid var(--line);
  height:58px; animation-delay:.08s;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.28));
}
.rail--top::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.85), transparent);
  transition:background 620ms;
}
@keyframes railIn{from{opacity:0; transform:translateY(-14px);}to{opacity:1;}}
.rail--bottom{animation-name:railInUp;}
@keyframes railInUp{from{opacity:0; transform:translateY(14px);}to{opacity:1;}}

.brand{display:flex; align-items:baseline; gap:10px;}
.brand__mark{color:var(--brass-2); font-size:15px; transform:translateY(-1px);}
.brand__name{
  font-family:var(--ff-display); font-variation-settings:"wght" 700,"wdth" 75;
  font-size:23px; letter-spacing:.16em; color:var(--ink);
}
.brand__sub{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.34em;
  color:var(--brass); text-transform:uppercase;
}
.rail__right{margin-left:auto; display:flex; align-items:center; gap:12px;}

.chip{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--muted); border:1px solid var(--line-soft); border-radius:999px;
  padding:4px 11px; white-space:nowrap; max-width:340px;
  overflow:hidden; text-overflow:ellipsis;
}
.chip--ghost{color:var(--muted);}
.clock{
  font-family:var(--ff-mono); font-size:13px; color:var(--ink-2);
  letter-spacing:.08em; font-variant-numeric:tabular-nums;
}

/* ── 무대 ─────────────────────────────────────────────────── */

.stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px; padding:22px 30px; min-height:0; overflow:hidden;
}

/* ── 게임 타일 열 ─────────────────────────────────────────── */

.shelf{
  display:flex; align-items:center; justify-content:center;
  gap:22px; padding:26px 10px 30px; flex:0 0 auto;
}

.tile{
  --tile: 168px;
  position:relative; width:var(--tile); height:var(--tile); flex:0 0 auto;
  border:0; padding:0; cursor:pointer; color:inherit;
  border-radius:20px; overflow:hidden;
  background:
    linear-gradient(165deg, rgba(var(--tile-rgb),.30), rgba(var(--tile-rgb),.05) 52%, rgba(0,0,0,.34)),
    var(--baize);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 10px 26px -14px rgba(0,0,0,.9);
  transition:transform .34s var(--ease-pop), box-shadow .34s ease, filter .34s ease;
  transform-origin:center bottom;
  filter:saturate(.55) brightness(.78);
  animation:tileIn .62s var(--ease-pop) both;
  animation-delay:calc(var(--i) * 80ms + 120ms);
}
@keyframes tileIn{
  from{opacity:0; transform:translateY(26px) scale(.9) rotate(-2deg);}
  to  {opacity:1;}
}
.tile:focus{outline:none;}

.tile[aria-selected="true"]{
  filter:none;
  transform:translateY(-14px) scale(1.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 2px rgb(var(--tile-rgb)),
    0 0 0 5px rgba(var(--tile-rgb),.20),
    0 32px 60px -18px rgba(0,0,0,.95),
    0 0 70px -12px rgba(var(--tile-rgb),.55);
  z-index:2;
}
.tile[aria-selected="true"]::after{           /* 유리면 반사 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.16) 0%, transparent 42%);
}

.tile__mark{
  position:absolute; left:0; right:0; top:26px;
  display:flex; align-items:center; justify-content:center;
  color:rgb(var(--tile-rgb));
  transition:transform .34s var(--ease-pop);
}
.tile[aria-selected="true"] .tile__mark{transform:translateY(-3px) scale(1.06);}
.tile__mark svg{width:62px; height:62px; display:block;}

.tile__name{
  position:absolute; left:0; right:0; bottom:34px; text-align:center;
  font-family:var(--ff-display); font-variation-settings:"wght" 600,"wdth" 85;
  font-size:19px; letter-spacing:.04em; color:var(--ink);
}
.tile__sub{
  position:absolute; left:0; right:0; bottom:17px; text-align:center;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.15em;
  color:var(--muted); text-transform:uppercase;
}

.tile__led{
  position:absolute; top:12px; right:12px;
  width:9px; height:9px; border-radius:50%;
  background:var(--faint); box-shadow:0 0 0 3px rgba(0,0,0,.35);
}
.tile__led[data-s="running"]  {background:var(--ok);   box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 14px var(--ok);   animation:pulse 1.9s ease-in-out infinite;}
.tile__led[data-s="external"] {background:var(--live); box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 14px var(--live);}
.tile__led[data-s="starting"] {background:var(--warn); box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 14px var(--warn); animation:pulse .85s ease-in-out infinite;}
.tile__led[data-s="blocked"],
.tile__led[data-s="failed"]   {background:var(--bad);  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 0 12px var(--bad);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.32;}}

.tile__port{
  position:absolute; top:11px; left:12px;
  font-family:var(--ff-mono); font-size:9.5px; color:var(--faint);
  letter-spacing:.04em;
}

/* 공사중 — 플레이 불가 게임. 배지를 달고 타일을 한 톤 죽인다 (상태 LED 는 노란 고정등). */
.tile__badge{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  padding:2px 9px; border-radius:999px;
  font-family:var(--ff-mono); font-size:8.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#0a1512; background:var(--warn);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
  white-space:nowrap;
}
.tile[data-status="wip"]{filter:saturate(.25) brightness(.62);}
.tile[data-status="wip"][aria-selected="true"]{filter:saturate(.5) brightness(.85);}
.tile[data-status="wip"] .tile__mark{opacity:.55;}
.tile__led[data-s="wip"]{background:var(--warn); box-shadow:0 0 0 3px rgba(0,0,0,.35);}

/* ── 하단 정보판 ──────────────────────────────────────────── */

.readout{
  width:min(1000px,100%); display:grid; grid-template-columns:1fr 320px; gap:34px;
  padding:24px 30px 26px; border-radius:16px;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.32));
  border:1px solid var(--line-soft);
  border-top-color:rgba(var(--accent-rgb),.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-top-color 620ms;
  animation:railInUp .7s var(--ease-pop) .28s both;
  position:relative; overflow:hidden;
}
/* 선택한 게임의 마크를 카드 왼쪽 아래로 흘려 여백을 메운다 */
.readout__ghost{
  position:absolute; left:6px; bottom:-46px; width:230px; height:230px;
  color:rgb(var(--accent-rgb)); opacity:.07; pointer-events:none;
  transition:color 620ms;
}
.readout__ghost svg{width:100%; height:100%; stroke-width:1.3;}
.readout__main,.readout__side{position:relative;}
.readout__title{
  margin:0; font-family:var(--ff-display);
  font-variation-settings:"wght" 700,"wdth" 82;
  font-size:32px; letter-spacing:.02em; line-height:1.1;
}
.readout__title small{
  display:inline-block; margin-left:12px; vertical-align:middle;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em;
  color:rgb(var(--tile-rgb, var(--accent-rgb))); text-transform:uppercase;
  font-variation-settings:normal;
}
.readout__tagline{margin:8px 0 0; color:var(--ink-2); font-size:14px;}
.readout__ai{
  margin:12px 0 0; padding-left:13px; font-size:12.8px; color:var(--muted);
  border-left:2px solid rgba(var(--accent-rgb),.6);
}
.readout__actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}

.act{
  font-family:var(--ff-display); font-variation-settings:"wght" 600,"wdth" 88;
  font-size:14px; letter-spacing:.05em;
  padding:10px 22px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink);
  transition:background .18s, transform .18s var(--ease-pop), border-color .18s;
}
.act:hover{background:rgba(255,255,255,.09); transform:translateY(-2px);}
.act:active{transform:translateY(0);}
.act--primary{
  background:rgba(var(--accent-rgb),.92); border-color:transparent; color:#0a1512;
  box-shadow:0 8px 22px -10px rgba(var(--accent-rgb),.9);
}
.act--primary:hover{background:rgb(var(--accent-rgb));}
.act--danger{color:var(--bad); border-color:rgba(224,104,95,.4);}
.act[disabled]{opacity:.34; cursor:not-allowed; transform:none;}

.readout__side{display:grid; gap:16px; align-content:start;}
.panel__h{
  margin:0 0 8px; font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
}
.agents,.deps{list-style:none; margin:0; padding:0; display:grid; gap:5px;}
.agents li,.deps li{
  font-size:12px; color:var(--ink-2);
  display:flex; align-items:center; gap:8px;
}
.deps li::before{
  content:"●"; font-size:8px; color:var(--ok); flex:0 0 auto;
}
.deps li[data-ok="false"]::before{content:"✕"; font-size:10px; color:var(--bad);}
.deps li[data-ok="opt"]::before{content:"○"; font-size:9px; color:var(--faint);}
.deps li[data-ok="false"]{color:var(--bad);}
.deps li[data-ok="opt"]{color:var(--muted);}
.deps li{align-items:flex-start; line-height:1.5;}
.deps li em{font-style:normal; color:var(--muted); font-size:10.5px;}
.deps li[data-ok="false"] em{color:rgba(224,104,95,.85);}

/* 상태 표 */
.facts{
  display:grid; grid-template-columns:46px 1fr; gap:5px 12px; margin:0;
  font-size:11.5px; align-items:baseline;
}
.facts dt{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em;
  color:var(--faint); margin:0;
}
.facts dd{margin:0; color:var(--ink-2); font-family:var(--ff-mono); font-size:11px; word-break:break-all;}
.agents li::before{
  content:""; width:5px; height:5px; border-radius:1px; flex:0 0 auto;
  background:rgb(var(--tile-rgb, var(--accent-rgb)));
}

/* ── 버튼 힌트 ────────────────────────────────────────────── */

.hints{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hint{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--muted); letter-spacing:.02em;
}
.btn{
  display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 5px;
  border-radius:999px; border:1px solid var(--line-soft);
  background:rgba(255,255,255,.05); color:var(--ink-2);
  font-family:var(--ff-mono); font-size:10.5px; font-weight:600;
}
.btn--a{border-color:rgba(88,214,141,.5); color:var(--ok);}
.btn--b{border-color:rgba(224,104,95,.45); color:var(--bad);}

.powerdown{
  margin-left:auto; cursor:pointer;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  background:none; border:1px solid var(--line-soft); border-radius:7px; padding:6px 13px;
  transition:color .18s, border-color .18s, background .18s;
}
.powerdown:hover{color:var(--bad); border-color:rgba(224,104,95,.35);}
.powerdown[hidden]{display:none;}   /* web 모드: /api/shutdown 이 막혀 있으므로 버튼 자체를 감춘다 */

/* ── 로그 서랍 ────────────────────────────────────────────── */

.drawer{
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  height:min(46vh,380px); display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(6,18,16,.97), rgba(4,12,10,.99));
  border-top:1px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.95);
  transform:translateY(101%); transition:transform .4s var(--ease-pop);
}
.drawer.open{transform:translateY(0);}
.drawer__bar{
  display:flex; align-items:center; gap:12px; padding:0 20px; height:42px;
  border-bottom:1px solid var(--line-soft); flex:0 0 auto;
}
.drawer__title{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
}
.drawer__spacer{flex:1;}
.drawer__x,.screen__act,.screen__home{
  cursor:pointer; background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft); border-radius:7px;
  color:var(--ink-2); font-family:var(--ff-mono); font-size:11px;
  padding:5px 12px; transition:background .18s, color .18s;
}
.drawer__x:hover,.screen__act:hover,.screen__home:hover{background:rgba(255,255,255,.12); color:var(--ink);}
.screen__act--stop:hover{color:var(--bad);}
.drawer__body{
  flex:1; margin:0; padding:14px 20px 18px; overflow:auto;
  font-family:var(--ff-mono); font-size:11.5px; line-height:1.72;
  color:var(--ink-2); white-space:pre-wrap; word-break:break-all;
  user-select:text;
}
.drawer__body[data-empty="1"]{color:var(--faint); font-style:italic;}
.drawer__body::-webkit-scrollbar{width:9px;}
.drawer__body::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.35); border-radius:9px;}

/* ── 기동 연출 ────────────────────────────────────────────── */

.boot{
  position:absolute; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:26px;
  background:radial-gradient(70% 70% at 50% 50%,
    rgba(var(--accent-rgb),.24) 0%, rgba(4,12,10,.96) 62%);
  backdrop-filter:blur(3px);
}
.boot.on{display:flex; animation:bootIn .34s ease both;}
@keyframes bootIn{from{opacity:0;}to{opacity:1;}}
.boot__ring{
  position:absolute; width:190px; height:190px; border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),.55);
  animation:ringOut 1.5s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes ringOut{
  from{transform:scale(.55); opacity:.95;}
  to  {transform:scale(2.3);  opacity:0;}
}
.boot__mark{color:rgb(var(--accent-rgb));}
.boot__mark svg{width:96px; height:96px; animation:markBeat 1.5s ease-in-out infinite;}
@keyframes markBeat{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
.boot__text{
  font-family:var(--ff-display); font-variation-settings:"wght" 600,"wdth" 85;
  font-size:16px; letter-spacing:.24em; color:var(--ink-2); text-transform:uppercase;
}

/* ── 게임 화면 ────────────────────────────────────────────── */

.screen{
  position:absolute; inset:0; z-index:70; display:none;
  flex-direction:column; background:var(--baize-2);
}
.screen.on{display:flex; animation:screenIn .4s var(--ease-pop) both;}
@keyframes screenIn{from{opacity:0; transform:scale(.965);}to{opacity:1; transform:none;}}
.screen__bar{
  display:flex; align-items:center; gap:14px; padding:0 18px; height:46px;
  flex:0 0 auto; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,51,44,.9), rgba(6,18,16,.9));
}
.screen__title{
  font-family:var(--ff-display); font-variation-settings:"wght" 600,"wdth" 85;
  font-size:15px; letter-spacing:.06em;
}
.screen__url{font-family:var(--ff-mono); font-size:10.5px; color:var(--faint);}
.screen__frame{flex:1; width:100%; border:0; background:#fff;}
.screen__status{margin:0; padding:8px 18px; font-size:12px; color:var(--ink);}

/* ── 토스트 ───────────────────────────────────────────────── */

.toast{
  position:absolute; left:50%; bottom:82px; z-index:80;
  transform:translate(-50%,16px); opacity:0; pointer-events:none;
  padding:11px 22px; border-radius:10px; max-width:70vw;
  background:rgba(6,18,16,.96); border:1px solid rgba(var(--accent-rgb),.5);
  color:var(--ink); font-size:13px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.95);
  transition:opacity .26s, transform .26s var(--ease-pop);
}
.toast.on{opacity:1; transform:translate(-50%,0);}
.toast[data-kind="bad"]{border-color:rgba(224,104,95,.65);}

/* ── 좁은 화면 ────────────────────────────────────────────── */

@media (max-width:900px){
  .readout{grid-template-columns:1fr; gap:20px;}
  .tile{--tile:132px;}
  .tile__mark svg{width:48px; height:48px;}
  .shelf{gap:14px; flex-wrap:wrap;}
  .rail{padding:0 16px;}
  .chip{display:none;}
}
@media (max-height:680px){
  .shelf{padding:10px 10px 14px;}
  .tile{--tile:132px;}
  .readout__title{font-size:25px;}
  .stage{gap:16px;}
}

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