*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:#0b0c1a;font-family:'Courier New',monospace;overflow:hidden;color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
#wrap{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;}
#stage{position:relative;}
canvas{image-rendering:auto;display:block;box-shadow:0 0 0 4px #000,0 0 0 10px #2a2a40,0 18px 50px rgba(0,0,0,.7);background:#000;}
#titleSprite,.card canvas{image-rendering:pixelated;}
#textbox{position:absolute;left:8px;right:8px;bottom:8px;background:#fbfbff;color:#15151f;border:4px solid #383868;border-radius:10px;padding:12px 16px 16px;min-height:70px;font-size:clamp(16px,2.7vw,20px);font-weight:bold;line-height:1.45;box-shadow:inset 0 0 0 3px #c7c7e0,0 5px 0 #20203a;display:none;z-index:10;cursor:pointer;letter-spacing:.3px;}
#textbox .nm{color:#c0392b;font-weight:bold;display:block;margin-bottom:4px;font-size:clamp(13px,2.2vw,16px);}
#textbox .arrow{position:absolute;right:12px;bottom:6px;color:#383868;animation:bob .6s infinite;font-size:12px;}
@keyframes bob{50%{transform:translateY(3px);}}
#menu{position:absolute;right:8px;bottom:92px;background:#fbfbff;color:#15151f;border:4px solid #383868;border-radius:10px;display:none;z-index:11;box-shadow:0 5px 0 #20203a;min-width:184px;max-width:250px;overflow:hidden;}
#menu .it{padding:9px 14px 9px 26px;position:relative;cursor:pointer;font-size:clamp(15px,2.4vw,17px);font-weight:bold;border-bottom:1px solid #e4e4f0;}
#menu .it:last-child{border-bottom:none;}
#menu .it.sel{background:#ffe27a;}
#menu .it.sel::before{content:'▶';position:absolute;left:7px;color:#c0392b;}
#menu .it.dis{opacity:.45;}
#menu .it small{display:block;font-weight:normal;color:#777;font-size:12px;margin-top:1px;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
#title{z-index:60;background:radial-gradient(circle at 50% 26%,#7bd0ff,#2a7fd0 52%,#1a2a6b);padding:16px;}
#title h1{font-size:clamp(28px,8vw,68px);color:#fff;text-shadow:4px 4px 0 #0a1a4a,-2px -2px 0 #cfe;letter-spacing:3px;line-height:1;}
#title .s{font-size:clamp(12px,3vw,20px);color:#fff;text-shadow:2px 2px 0 #0a1a4a;margin-top:4px;}
#title canvas{margin:10px 0;box-shadow:none;background:transparent;}
#title .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
#title button{padding:12px 26px;font-family:inherit;font-size:clamp(14px,2.6vw,20px);font-weight:bold;background:#ffe27a;color:#1a2a6b;border:4px solid #fff;border-radius:14px;cursor:pointer;box-shadow:0 6px 0 #c79a00;}
#title button:active{transform:translateY(4px);box-shadow:0 2px 0 #c79a00;}
#continueBtn{animation:pulse 1.1s infinite;}
@keyframes pulse{50%{transform:scale(1.05);}}
#title .h{margin-top:14px;font-size:clamp(10px,2.2vw,14px);color:#fff;max-width:480px;opacity:.95;line-height:1.5;}
.ovr{z-index:55;display:none;background:#15162e;padding:12px;overflow:auto;justify-content:flex-start;}
.ovr h2{text-align:center;color:#ffe27a;margin:4px 0 10px;font-size:19px;letter-spacing:1px;}
#dexList,#teamList{width:100%;max-width:600px;}
.card{background:#23244a;border:3px solid #44467e;border-radius:10px;padding:9px 11px;margin:6px auto;max-width:560px;display:flex;gap:11px;align-items:center;width:100%;}
.card canvas{box-shadow:none;background:#0d0d1c;border-radius:6px;flex:none;}
.card .info{text-align:left;flex:1;}
.card .info b{color:#ffe27a;font-size:14px;}
.card .info .tag{font-size:10px;}
.card .info p{font-size:12px;color:#cfd0f0;margin-top:3px;line-height:1.3;}
.card.locked{opacity:.4;}
.card.locked .info b::after{content:' — ???';}
.hpmini{height:7px;background:#444;border-radius:4px;overflow:hidden;margin-top:4px;border:1px solid #222;max-width:170px;}
.hpmini>div{height:100%;}
.ovr .close{margin:10px auto 4px;padding:9px 24px;font-family:inherit;font-weight:bold;background:#ffe27a;color:#15162e;border:none;border-radius:10px;cursor:pointer;}
#hud{position:absolute;top:8px;left:8px;z-index:12;display:none;gap:6px;flex-wrap:wrap;}
#hud button,#sound{font-family:inherit;font-size:12px;font-weight:bold;background:rgba(20,20,40,.85);color:#ffe27a;border:2px solid #ffe27a;border-radius:8px;padding:5px 9px;cursor:pointer;}
#sound{position:absolute;top:8px;right:8px;z-index:12;}
#toast{position:absolute;top:42px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.82);border:2px solid #ffe27a;border-radius:18px;padding:6px 16px;font-size:13px;z-index:30;display:none;text-align:center;max-width:92%;}
#pad{position:absolute;bottom:14px;left:14px;z-index:40;display:none;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:5px;opacity:.9;}
#pad button{background:rgba(40,42,80,.9);color:#fff;border:3px solid #fff;border-radius:10px;font-size:20px;font-family:inherit;cursor:pointer;}
#pad button:active{background:#c0392b;}
.pu{grid-area:1/2}.pl{grid-area:2/1}.pr{grid-area:2/3}.pd{grid-area:3/2}
#padB{position:absolute;bottom:14px;right:14px;z-index:40;display:none;flex-direction:column;gap:8px;}
#padB button{width:62px;height:62px;border-radius:50%;border:3px solid #fff;font-family:inherit;font-weight:bold;font-size:18px;cursor:pointer;}
#btnA{background:#27ae60;color:#fff;}#btnB{background:#c0392b;color:#fff;}