@font-face{font-family:"Press Start 2P";src:url("/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url("/fonts/vt323-latin-400-normal.woff2") format("woff2");font-display:swap}
:root{
  --bg:#120d1c; --bg2:#1c1530; --panel:#241b3a; --panel2:#2e2448; --line:#4a3a70; --ink:#f3ecff; --dim:#a596c8;
  --gold:#ffd23a; --red:#ff5a6a; --green:#5ee08a; --blue:#5ab4ff;
  --px:"Press Start 2P", ui-monospace, monospace; --tx:"VT323", ui-monospace, monospace;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--tx);font-size:21px;overflow:hidden;-webkit-font-smoothing:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
input{-webkit-user-select:text;user-select:text}
.hidden{display:none!important}
.dim{color:var(--dim)}
button{font-family:var(--px);cursor:pointer;touch-action:manipulation;color:inherit}
input,select{font-family:var(--tx);font-size:21px}
h1,h2{font-family:var(--px);font-weight:normal;margin:0}
h1{font-size:20px;color:var(--gold);text-shadow:3px 3px 0 #0a0612}
h2{font-size:11px;color:var(--gold);letter-spacing:1px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.screen{position:fixed;inset:0}

/* ---------- buttons & panels ---------- */
.btn{background:#5a3fd0;color:#fff;border:0;padding:11px 15px;font-size:11px;letter-spacing:1px;
  box-shadow:inset -3px -3px 0 #3a26a0, inset 3px 3px 0 #7d66ff, 0 4px 0 #0a0612;position:relative;top:0}
.btn:hover{filter:brightness(1.15)}
.btn:active{top:3px;box-shadow:inset -3px -3px 0 #3a26a0, inset 3px 3px 0 #7d66ff, 0 1px 0 #0a0612}
.btn.big{font-size:15px;padding:16px 20px;background:#e8a020;box-shadow:inset -4px -4px 0 #a86a10, inset 4px 4px 0 #ffd060, 0 5px 0 #0a0612;color:#2a1600}
.btn.small{font-size:9px;padding:9px 11px}
.btn.ghost{background:#3a2e58;box-shadow:inset -3px -3px 0 #251c3c, inset 3px 3px 0 #54447c, 0 4px 0 #0a0612}
.btn.mall-btn{background:#d0408a;box-shadow:inset -3px -3px 0 #8e1e5a, inset 3px 3px 0 #ff7ab8, 0 4px 0 #0a0612}
.btn:disabled{filter:grayscale(1) brightness(.6);cursor:default}
.panel{background:var(--panel);border:3px solid var(--line);box-shadow:0 5px 0 #0a0612, inset 0 0 0 3px #1c1530;padding:12px;position:relative}
.err{color:var(--red);font-size:20px;text-align:center}
.err:empty{display:none}
.note{color:var(--dim);font-size:18px;line-height:1.05;margin-top:6px}
.note:empty{display:none}
.yen-home{position:absolute;top:calc(10px + var(--safe-t));left:12px;z-index:3;font-family:var(--px);font-size:10px;color:var(--dim);text-decoration:none;padding:8px 10px;background:rgba(18,13,28,.75);border:2px solid var(--line)}
.yen-home:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- menu: a wooden board in a green tournament hall ---------- */
#menu{background:radial-gradient(ellipse at 50% 0%,#1f5a3e 0%,#0d3324 45%,#06190f 100%)}
#menuBg{position:absolute;inset:0;width:100%;height:100%}
.menu-wrap{position:relative;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:34px 14px 24px}
.crest{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e8b84a 45%,#9a6a14);border:4px solid #5a3a0c;box-shadow:0 0 0 4px #e8b84a,0 8px 0 #031008;display:flex;align-items:center;justify-content:center;margin:3vh 0 -14px;z-index:1}
.crest canvas{width:56px;height:56px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--tx);font-size:150px;line-height:.8;color:#fff3c4;letter-spacing:10px;padding:10px 26px 6px 36px;
  background:linear-gradient(#f6e2a8,#e8b84a 48%,#c88a1a 52%,#e8b84a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 5px 0 #5a3a0c) drop-shadow(0 10px 0 #031008)}
.logo canvas{width:58px;height:58px;filter:none;align-self:center}
.ribbon{font-family:var(--px);font-size:10px;letter-spacing:2px;color:#2a1600;background:#e8b84a;padding:8px 18px;margin:4px 0 26px;position:relative;box-shadow:0 4px 0 #031008}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:6px;width:14px;height:100%;background:#a8781a;z-index:-1}
.ribbon::before{left:-10px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.ribbon::after{right:-10px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
#menu .menu-panel{width:min(340px,100%);display:flex;flex-direction:column;gap:14px;padding:16px;
  background:repeating-linear-gradient(92deg,#4a2a16 0 9px,#53301a 9px 13px,#45260f 13px 22px);border:4px solid #e8b84a;box-shadow:0 0 0 4px #2a1608,0 9px 0 #031008}
#menu .menu-panel::before,#menu .menu-panel::after{content:"";position:absolute;width:12px;height:12px;background:#ffe07a;border:3px solid #6a4410;top:-8px}
#menu .menu-panel::before{left:-8px}#menu .menu-panel::after{right:-8px}
#menu .mechip{background:#f4e4c0;border-color:#2a1608;color:#2a1608}
#menu .mechip b{color:#6a2a10}
#menu .mechip small{color:#7a5a3a}
#menu .btn.big{background:#f4e4c0;color:#2a1608;box-shadow:inset -4px -4px 0 #c8a878, inset 4px 4px 0 #fffaf0, 0 5px 0 #1a0c04}
#menu .btn:not(.big):not(.mall-btn){background:#2a1608;box-shadow:inset -3px -3px 0 #160a02, inset 3px 3px 0 #5a3a20, 0 4px 0 #0a0402;color:#ffe07a}
#menu .btn.mall-btn{background:#1f7a4a;color:#ffe07a;box-shadow:inset -3px -3px 0 #0f4a2a, inset 3px 3px 0 #3aa86a, 0 4px 0 #0a0402}
#menu #codeIn{background:#f4e4c0;border-color:#2a1608;color:#6a2a10}
#menu .yen-home{background:rgba(6,25,15,.8);border-color:#e8b84a;color:#e8d8a0}
#menu .err{color:#ffb0a0}
@media (max-width:600px){.logo{font-size:96px;letter-spacing:6px;padding:8px 14px 4px 22px;background:none;-webkit-text-fill-color:#ffd23a;color:#ffd23a;filter:none;text-shadow:0 4px 0 #8a5a10,0 7px 0 #031008}.logo canvas{width:40px;height:40px}.crest{width:72px;height:72px}.crest canvas{width:42px;height:42px}.ribbon{font-size:8px}}
.name-in{background:#120d1c;border:3px solid var(--line);color:var(--ink);padding:8px 10px;text-align:center;font-family:var(--px);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.join-row{display:flex;gap:8px}
#menu .btn.big.pub{background:#3a8ae2;color:#fff;box-shadow:inset -4px -4px 0 #1f5aa0, inset 4px 4px 0 #7ab4f4, 0 5px 0 #1a0c04;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.big.pub small{font-size:10px;opacity:.85}
.pubtag{font-size:10px;margin-left:10px;padding:3px 6px;border:2px solid #3a8ae2;color:#7ab4f4;vertical-align:middle;letter-spacing:1px}
#codeIn{flex:1;min-width:0;background:#120d1c;border:3px solid var(--line);color:var(--gold);font-family:var(--px);font-size:20px;text-align:center;text-transform:uppercase;letter-spacing:6px;padding:8px}

/* ---------- lobby ---------- */
#lobby{background:radial-gradient(ellipse at top,#2a1f48,var(--bg) 70%);overflow:auto}
.lobby-inner{max-width:720px;margin:0 auto;padding:16px 14px 30px;display:flex;flex-direction:column;gap:14px}
.lobby-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code-box{font-family:var(--px);font-size:11px;color:var(--dim)}
.code-box b{font-size:30px;color:var(--gold);letter-spacing:6px;text-shadow:3px 3px 0 #0a0612;margin-left:8px}
#inviteBox{flex:1;display:flex;gap:8px;min-width:240px}
#inviteLink{flex:1;min-width:0;background:#120d1c;border:2px solid var(--line);color:var(--blue);padding:6px 10px;font-size:19px}
#linkPick{background:#120d1c;border:2px solid var(--line);color:var(--gold);font-size:18px;max-width:150px}
.lobby-panel h2{margin-bottom:10px}
.lp{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:2px solid #1c1530;font-size:23px}
.lp canvas{width:32px;height:32px;flex:none}
.lp .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp .tag{font-family:var(--px);font-size:8px;color:var(--dim);border:2px solid var(--line);padding:4px 5px}
.lp .tag.host{color:var(--gold);border-color:var(--gold)}
.lp .tag.you{color:var(--green);border-color:var(--green)}
.lp.empty{color:#5a4a80}
.board-note{margin:12px 0 4px;color:var(--dim);font-size:19px;line-height:1.1}
.lobby-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.lobby-btns #waitNote{flex:1;text-align:right;font-size:19px}
.lobby-btns #startBtn{margin-left:auto}
.log{font-size:19px;line-height:1.1;overflow:auto}
.log .l{margin:2px 0}
.log .l.sys{color:var(--dim);font-style:italic}
.small-log{max-height:160px;min-height:60px}
.qr-panel{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:94vw}
#qrCv{width:min(300px,78vw);height:auto;background:#fff}
#qrTxt{color:var(--blue);font-size:19px;word-break:break-all;text-align:center;max-width:300px}
#qrCode{font-family:var(--px);font-size:20px;color:var(--gold);letter-spacing:6px}

/* ---------- game ---------- */
#game{display:grid;grid-template-columns:minmax(0,1fr) 360px;background:radial-gradient(ellipse at 40% 30%,#22193a,var(--bg) 75%)}
#boardCol{display:flex;flex-direction:column;min-width:0;min-height:0;padding:10px 10px 8px}
#turnBar{display:flex;align-items:center;justify-content:center;gap:14px;min-height:36px;font-family:var(--px);font-size:13px;text-shadow:2px 2px 0 #000}
#turnBar.mine #turnTxt{color:var(--gold);animation:pulse 1.2s infinite}
#checkTxt{color:var(--red);font-size:11px}
@keyframes pulse{50%{opacity:.55}}
#boardWrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#board{display:block;touch-action:none;cursor:pointer;filter:drop-shadow(0 6px 0 #0a0612)}
#banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:var(--px);font-size:26px;color:#fff;text-shadow:4px 4px 0 #000;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;white-space:nowrap}
#banner.show{opacity:1}
#banner .sub{display:block;font-size:11px;color:var(--gold);margin-top:10px}
#infoBar{min-height:38px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:20px;color:var(--dim);text-align:center;padding:4px 6px 0;line-height:1.05}
#infoBar.target{color:var(--green)}
#side{overflow:auto;padding:10px 12px 14px 4px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
/* players */
.pr{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:21px}
.pr canvas{width:28px;height:28px;flex:none}
.pr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .co{font-family:var(--px);font-size:10px;color:var(--gold);white-space:nowrap}
.pr .arrow{width:12px;color:var(--gold);font-family:var(--px);font-size:10px}
.pr.out{opacity:.4;text-decoration:line-through}
.pr.turn{background:#3a2e58}
.pr .st{font-family:var(--px);font-size:7px;padding:3px 4px;border:2px solid var(--red);color:var(--red)}
.pr .st.away{border-color:var(--dim);color:var(--dim)}
/* shop & bag cards */
#shopCards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{background:#1a1330;border:2px solid var(--line);padding:6px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;cursor:pointer;text-align:center;min-width:0}
.card:hover,.card.sel{border-color:var(--gold)}
.card canvas{width:48px;height:48px}
.card .nm{font-size:17px;line-height:.95;min-height:32px;display:flex;align-items:center}
.card .pr2{font-family:var(--px);font-size:9px;color:var(--gold)}
.card .btn{width:100%;padding:7px 2px;font-size:8px}
.card.sold{opacity:.45}
.card.sold::after{content:"SOLD";position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);font-family:var(--px);font-size:11px;color:var(--red);border:2px solid var(--red);padding:3px 4px;background:#1a1330}
#bagItems{display:flex;flex-wrap:wrap;gap:6px;min-height:58px}
.bagit{width:58px;height:58px;background:#1a1330;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bagit canvas{width:44px;height:44px}
.bagit:hover{border-color:var(--gold)}
.bagit.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
#bagItems .empty{color:#5a4a80;font-size:18px;align-self:center}
#log{flex:1;min-height:110px;max-height:240px}
.log b{font-weight:normal}
.side-btns{display:flex;gap:8px;flex-wrap:wrap}
.side-btns .btn{flex:1}
#toasts{position:fixed;top:calc(12px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:30;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:rgba(18,13,28,.94);border:2px solid var(--line);padding:5px 12px;font-size:21px;animation:tin .2s;text-align:center}
.toast.bad{border-color:var(--red);color:#ffd0d6}
.toast.good{border-color:var(--green);color:#d0ffe0}
@keyframes tin{from{transform:translateY(-8px);opacity:0}}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,5,14,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;padding:12px}
.small-panel{min-width:260px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
#promoBtns{display:flex;gap:8px}
#promoBtns button{width:64px;height:64px;background:#1a1330;border:2px solid var(--line);padding:0}
#promoBtns button:hover{border-color:var(--gold)}
#promoBtns canvas{width:56px;height:56px}
.over-panel h1{font-size:24px}
#overBtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mall-panel{width:min(980px,100%);max-height:92vh;overflow:auto;-webkit-overflow-scrolling:touch}
.mall-head{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:-12px;background:var(--panel);padding:4px 0 10px;z-index:2}
.mall-head h1{font-size:24px;color:#ff7ab8;text-shadow:3px 3px 0 #5a0e34}
.mall-how{font-size:19px;line-height:1.1;color:var(--dim);margin-bottom:12px}
.mall-how p{margin:4px 0}
.mall-how b{color:var(--ink);font-weight:normal}
#mallGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.mi{display:flex;gap:10px;background:#1a1330;border:2px solid var(--line);padding:8px}
.mi canvas{width:56px;height:56px;flex:none;background:#2e2448;border:2px solid #1c1530}
.mi .t{font-family:var(--px);font-size:10px;color:var(--gold);line-height:1.4}
.mi .k{font-family:var(--px);font-size:7px;color:#ff7ab8;margin:2px 0 4px}
.mi .d{font-size:18px;line-height:1;color:var(--ink)}
.mi .p{float:right;font-family:var(--px);font-size:10px;color:var(--gold)}

/* ---------- phones / small screens ---------- */
@media (max-width:900px){
  html,body{font-size:19px}
  #game{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #boardCol{padding:6px 4px 4px}
  #boardWrap{flex:none}
  #side{overflow:visible;padding:4px 8px calc(20px + var(--safe-b))}
  #log{max-height:160px}
  .logo{font-size:36px;gap:10px;margin:2vh 0 20px;text-shadow:3px 3px 0 #a86a10, 5px 5px 0 #0a0612}
  .logo canvas{width:40px;height:40px}
  .menu-wrap{padding-top:56px}
  #banner{font-size:16px}
  #turnBar{font-size:11px;min-height:28px}
  .yen-home{font-size:8px;padding:6px 8px}
  .code-box b{font-size:22px}
  #inviteLink{display:none}
  #linkPick{max-width:none;flex:1;min-width:0}
  .mi .d{font-size:17px}
}

/* your Yen Games character (set on the home page) */
.mechip{display:flex;align-items:center;gap:10px;background:#120d1c;border:3px solid var(--line);padding:6px 10px;text-decoration:none;color:var(--ink)}
.mechip:hover{border-color:var(--gold)}
.mechip canvas{width:36px;height:36px;flex:none}
.mechip b{display:block;font-family:var(--px);font-size:11px;font-weight:normal;color:var(--gold);line-height:1.5}
.mechip small{display:block;font-size:17px;color:var(--dim);line-height:1}
.lp .tag.adm{color:#ffd23a;border-color:#ffd23a}
.lp .tag.adm.dev{color:#fff;border-color:#ff7ab8;background:linear-gradient(90deg,#e2363e,#e8a020,#3aa058,#3a8ae2,#9a5ad0)}
.lp .tag.adm.vip{color:#fff;border-color:#d08aff;background:linear-gradient(90deg,#9a5ad0,#e04ab8)}