*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden;background:#0e1626;font-family:'Trebuchet MS',system-ui,sans-serif}
canvas{position:fixed;inset:0;touch-action:none}
#hud{position:fixed;top:max(8px,env(safe-area-inset-top));left:0;right:0;display:flex;gap:8px;
     justify-content:center;pointer-events:none;z-index:2}
.pill{background:#122038cc;color:#fff;padding:7px 16px;border-radius:22px;font-weight:bold;
      font-size:17px;border:1px solid #ffffff22}
#uiMute{pointer-events:auto;cursor:pointer;box-shadow:none;padding:7px 14px}
#uiMute:active{transform:none;box-shadow:none}
#msg{position:fixed;top:44%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;
     text-shadow:0 3px 10px #000;pointer-events:none;z-index:3}
#msg h1{font-size:clamp(30px,6vw,56px);letter-spacing:1px}
#msg p{font-size:clamp(14px,2.5vw,19px);opacity:.95}
#rotate{position:fixed;inset:0;background:#0e1626;color:#fff;display:none;z-index:9;
        flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
#rotate .ph{font-size:64px;animation:spin 1.6s ease-in-out infinite}
@keyframes spin{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media(orientation:portrait){#rotate{display:flex}}
#start{position:fixed;inset:0;background:linear-gradient(#16233d,#0e1626);color:#fff;z-index:8;
       display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
#start h1{font-size:clamp(36px,7vw,64px);letter-spacing:1px}
#start p{opacity:.8;margin-bottom:10px}
#start.hide{display:none}
#panel{position:fixed;inset:0;background:#0e1626ee;color:#fff;display:none;z-index:5;
       flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;overflow:auto}
#panel.show{display:flex}
#panel h2{font-size:clamp(24px,5vw,40px);margin-bottom:4px}
#panel .sub{opacity:.8;margin-bottom:14px}
#saveRow{display:flex;gap:8px;margin-bottom:14px}
#saveRow input{background:#ffffff14;border:1px solid #ffffff33;color:#fff;border-radius:10px;
               padding:10px 14px;font-size:16px;width:180px;outline:none}
#saveRow input:focus{border-color:#ffd54f}
#board{width:min(340px,90vw);background:#ffffff10;border-radius:14px;padding:10px 8px;margin-bottom:16px;min-height:60px}
#board .row{display:flex;padding:5px 12px;border-radius:8px;font-size:15px}
#board .row.me{background:#ffd54f30;font-weight:bold}
#board .hint{opacity:.6;font-size:13px;padding:8px}
.rk{opacity:.6;width:26px;text-align:left}.nm{flex:1;text-align:left}
button{background:#ffd54f;color:#222;border:none;font-weight:bold;font-size:17px;padding:12px 30px;
       border-radius:30px;cursor:pointer;box-shadow:0 4px 0 #c9a638}
button:active{transform:translateY(2px);box-shadow:0 2px 0 #c9a638}
button.small{font-size:15px;padding:10px 18px}
.tiny{font-size:12px;opacity:.55;margin-top:12px;max-width:330px;line-height:1.5}