:root{--ink:#3b2412;--teal:#1fa5bd;--sun:#ffc93c;--red:#e8453c;--green:#2fb36d;--card:#fffaf0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd8f0;font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink)}
body{touch-action:none;user-select:none;-webkit-user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}
.hidden{display:none!important}

#top{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;pointer-events:none;z-index:5}
#top>*{pointer-events:auto}
#brand{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:4px 12px;font-weight:900;font-size:17px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
#brand b{color:var(--red)}
#tools{display:flex;gap:7px}
.tb{background:#fff;border:3px solid var(--ink);border-radius:12px;height:40px;min-width:40px;padding:0 12px;font-weight:900;font-size:15px;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;justify-content:center}
.tb.ic{padding:0;width:40px}
.tb svg{width:22px;height:22px}
.tb:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#stop{background:var(--red);color:#fff}
#mute .x,#music .x{display:none}
#mute.off .x,#music.off .x{display:inline}
#mute.off .on{display:none}
#mute.off,#music.off{background:#ddd}

#panel{position:fixed;z-index:4;background:var(--card);border:3px solid var(--ink);display:flex;flex-direction:column;gap:8px;padding:14px 16px 12px;
  right:12px;top:62px;bottom:12px;width:350px;border-radius:20px;box-shadow:0 5px 0 var(--ink);overflow:auto;touch-action:pan-y}
#panel h1{margin:0;font-size:24px;font-weight:900;line-height:1.1}
#panel .sub{margin:0;font-size:14px;font-weight:700;opacity:.8}
label,.lbl{font-weight:900;font-size:14px;margin-top:2px}
textarea{flex:1;min-height:120px;width:100%;resize:none;border:3px solid var(--ink);border-radius:14px;padding:8px 10px;font:700 16px/1.35 inherit;font-family:inherit;color:var(--ink);background:#fff;touch-action:pan-y;user-select:text;-webkit-user-select:text}
textarea:focus{outline:3px solid var(--sun)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.count{font-weight:900;background:var(--sun);border:2px solid var(--ink);border-radius:10px;padding:3px 9px;margin-right:auto}
.mini{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:4px 9px;font-weight:800;font-size:13px}
.mini:active{background:#ffe9a8}
.seg{display:flex;border:3px solid var(--ink);border-radius:12px;overflow:hidden}
.seg button{flex:1;padding:7px 0;background:#fff;font-weight:900;font-size:15px}
.seg button+button{border-left:3px solid var(--ink)}
.seg button.on{background:var(--teal);color:#fff}
.big{background:var(--sun);border:3px solid var(--ink);border-radius:16px;padding:12px 16px;font-size:22px;font-weight:900;box-shadow:0 5px 0 var(--ink)}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.mid{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:9px 14px;font-size:16px;font-weight:900;box-shadow:0 4px 0 var(--ink)}
.mid:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.msg{margin:0;min-height:0;font-weight:900;color:var(--red);font-size:14px}
.msg:empty{display:none}
.fair{margin:0;display:flex;gap:7px;align-items:flex-start;font-size:13px;font-weight:800;line-height:1.3;color:#1d6b43}
.fair svg{width:20px;height:20px;flex:none}

#result{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:58px 12px 12px;background:rgba(20,40,60,.35)}
#result .card{background:var(--card);border:4px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);width:min(560px,100%);max-height:100%;overflow:auto;padding:14px 16px 16px;text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1);touch-action:pan-y}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
#result h2{margin:0 0 6px;font-size:28px;font-weight:900;color:var(--red)}
#podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:4px 0 10px}
.pod{flex:1;max-width:160px;display:flex;flex-direction:column;align-items:center;min-width:0}
.pod img{width:72%;max-width:96px;animation:bob 1.2s ease-in-out infinite alternate}
.pod.p1 img{max-width:118px;width:86%}
@keyframes bob{to{transform:translateY(-6px) rotate(-4deg)}}
.pod .nm{font-weight:900;font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.pod.p1 .nm{font-size:21px}
.pod .crown{font-size:13px;font-weight:900;color:#b07800;text-transform:uppercase;letter-spacing:.5px}
.pod .blk{width:100%;border:3px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:center;font-size:30px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);padding-top:4px}
.p1 .blk{height:92px;background:#ffc23c}
.p2 .blk{height:66px;background:#b9c6d2}
.p3 .blk{height:48px;background:#e3965a}
#podium{border-bottom:4px solid var(--ink)}
#rank{list-style:none;margin:0 0 12px;padding:0;max-height:150px;overflow:auto;text-align:left;columns:2;column-gap:14px;font-weight:800;font-size:14px}
#rank li{padding:2px 0;break-inside:avoid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rank li b{display:inline-block;min-width:30px;color:var(--teal)}
#rank:empty{display:none}
.btns{display:flex;flex-direction:column;gap:9px}
.ghost{background:transparent;box-shadow:none}

/* phone / portrait: panel becomes a bottom sheet */
@media (max-aspect-ratio:21/20),(max-width:759px){
  #panel{left:8px;right:8px;width:auto;top:auto;bottom:8px;height:auto;max-height:calc(62% - 8px);padding:10px 12px;gap:6px;border-radius:18px}
  body.picker #panel{height:calc(52% - 8px)}

  #panel h1,#panel .sub{display:none}
  #panel{top:auto}
  textarea{min-height:60px;font-size:16px}
  .big{font-size:20px;padding:10px}
  #brand{font-size:15px}
  .fair{font-size:12px}
}
@media (max-height:460px) and (min-aspect-ratio:21/20){
  textarea{min-height:44px}
  #panel{top:56px;bottom:8px;width:320px;padding:8px 12px;gap:5px}
  #panel h1,#panel .sub{display:none}
  .big{font-size:18px;padding:8px}
}
@media (max-width:560px){ body.racing #brand{display:none} }
#panel>*{flex-shrink:0}
#panel>textarea{flex-shrink:1}

/* mode tabs */
.tabs{display:flex;gap:6px;background:#f1e3c4;border:3px solid var(--ink);border-radius:14px;padding:3px}
.tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 4px;border-radius:10px;font-weight:900;font-size:16px;background:transparent;color:#6b4a2a}
.tabs button img,.tabs button svg{width:24px;height:24px}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.pane{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}
.pane>*{flex-shrink:0}
.pane>textarea{flex-shrink:1}
#panel{flex-shrink:0}
.num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:14px;margin-right:4px;flex:none}
.lbl{display:flex;align-items:center;font-size:16px}
/* duck picker */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pick button{position:relative;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:900;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.pick img{height:54px;width:auto;pointer-events:none}
.pick button.on{background:#ffe27a;border-color:var(--red);box-shadow:0 0 0 3px var(--red),0 3px 0 var(--ink);transform:translateY(-1px)}
.pick button.on::after{content:"BẠN";position:absolute;top:-10px;right:-6px;background:var(--red);color:#fff;font-size:12px;padding:1px 7px;border-radius:9px;border:2px solid var(--ink)}
.how{display:flex;gap:6px;align-items:flex-start;font-weight:800;font-size:15px;line-height:1.35;background:#e6f7fb;border:2px dashed #1fa5bd;border-radius:12px;padding:7px 9px}
.how b{color:var(--red)}
.how .num{color:#fff;margin-top:1px}
kbd{font:900 13px inherit;font-family:inherit;background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 5px}
.stats{margin:0;text-align:center;font-weight:800;font-size:14px;color:#6b4a2a}
.stats:empty{display:none}
.resSub{margin:-2px 0 8px;font-weight:800;font-size:16px}
.resSub:empty{display:none}
.pod.me .nm{background:var(--red);color:#fff!important;border-radius:9px;padding:0 8px}
#rank li.me{color:var(--red)}
#result.game #rank{columns:1;max-height:none}
#result.game #rank li{display:inline-block;margin:0 8px}
#result.game #rank{text-align:center}

@media (max-aspect-ratio:21/20),(max-width:759px){
  .pane{gap:6px}
  .pick button{padding:4px 2px 5px}
  .pick img{height:44px}
}
@media (max-height:460px) and (min-aspect-ratio:21/20){
  .pick{grid-template-columns:repeat(6,1fr);gap:4px}
  .pick button{padding:3px 0;font-size:12px;border-radius:10px}
  .pick img{height:30px}
  .pick button.on::after{font-size:10px;padding:0 4px;top:-8px;right:-4px}
  .how{font-size:13px;padding:4px 7px}
  .tabs button{padding:4px;font-size:14px}
  .pane{gap:5px}
  .stats{font-size:12px}
}