*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#1b1530;--bg2:#2a2148;--tibo:#3fb7ff;--potato:#ffb347;--ink:#fff6e0;--px:4px}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:"Courier New",ui-monospace,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;overflow:hidden;touch-action:manipulation}
body{background:radial-gradient(circle at 50% 120%,#3a2a6a 0,var(--bg) 60%)}
#app{position:relative;height:100%;display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
/* scoreboard */
#scorebar{display:flex;align-items:center;gap:8px;padding:6px 64px 6px 10px;background:#0f0b1e;border-bottom:var(--px) solid #000;font-weight:bold;font-size:13px;z-index:5}
.sb-side{display:flex;align-items:center;gap:6px;white-space:nowrap}
.sb-tibo{color:var(--tibo)}.sb-potato{color:var(--potato)}
.sb-num{font-size:16px;font-variant-numeric:tabular-nums}
.sb-mid{flex:1;min-width:60px}
.sb-track{height:12px;background:var(--potato);border:3px solid #000;image-rendering:pixelated}
.sb-fill{height:100%;width:50%;background:var(--tibo);transition:width .6s steps(12)}
.sb-label{text-align:center;font-size:10px;opacity:.75;margin-top:2px}
.sb-status{opacity:.7}
.lang-btn{position:absolute;top:6px;right:8px;z-index:10;background:#fff6e0;color:#1b1530;padding:4px 8px;border:3px solid #000;box-shadow:3px 3px 0 #000;font-weight:bold;font-size:12px}
.screen{display:none;flex:1;min-height:0;position:relative;overflow-y:auto;overflow-x:hidden}
.screen.active{display:flex;flex-direction:column;align-items:center}
/* landing */
#landing{padding:18px 12px;justify-content:flex-start;gap:12px}
.title{text-align:center;line-height:1.05;margin-top:8px}
.t1{display:block;font-size:clamp(34px,8vw,72px);letter-spacing:4px;color:#fff;text-shadow:4px 4px 0 #ff3e7f,8px 8px 0 #000}
.t2{display:block;font-size:clamp(16px,3.6vw,28px);margin-top:10px;color:var(--potato);text-shadow:3px 3px 0 #000}
.tagline,.hint{text-align:center;opacity:.85;font-size:14px;max-width:640px}
.hint{font-size:12px;opacity:.65}
.pick{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;max-width:880px}
.card-pick{flex:1 1 280px;max-width:380px;padding:16px;border:var(--px) solid #000;box-shadow:6px 6px 0 #000;text-align:center;transition:transform .08s}
.card-pick:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.card-pick:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.pick-tibo{background:linear-gradient(#1d5c8f,#123a5e)}
.pick-potato{background:linear-gradient(#8f5a1d,#5e3a12)}
.pick-emoji{font-size:44px}
.pick-title{font-size:24px;font-weight:bold;margin-top:4px;text-shadow:2px 2px 0 #000}
.pick-sub{font-size:13px;opacity:.85;margin-bottom:8px}
.pick-desc{font-size:13px;line-height:1.45;opacity:.92;min-height:56px}
.pick-go{display:inline-block;margin-top:10px;background:#fff6e0;color:#000;padding:6px 14px;border:3px solid #000;font-weight:bold}
.vs{font-size:34px;font-weight:bold;color:#ff3e7f;text-shadow:3px 3px 0 #000}
/* game */
#game{padding:0}
#cv{width:100%;height:100%;display:block;touch-action:none;cursor:ew-resize}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;font-weight:bold;text-shadow:6px 6px 0 #000;pointer-events:none}
/* end */
#end{padding:14px 12px 20px;gap:10px}
.end-title{font-size:clamp(28px,6vw,48px);text-shadow:4px 4px 0 #000;color:#fff}
.end-stats{text-align:center;font-size:15px;line-height:1.6}
.end-stats b{color:var(--potato);font-size:22px}
#shareCanvas{width:min(92vw,600px);height:auto;border:var(--px) solid #000;box-shadow:6px 6px 0 #000;image-rendering:auto}
.end-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;text-decoration:none;background:#fff6e0;color:#1b1530;padding:9px 16px;border:3px solid #000;box-shadow:4px 4px 0 #000;font-weight:bold;font-size:14px}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.btn-x{background:#000;color:#fff;border-color:#fff}
.btn-main{background:#ff3e7f;color:#fff}
.ad-slot{width:min(92vw,728px);min-height:0;margin-top:6px}
.ad-slot:empty{display:none}
footer{text-align:center;font-size:10px;opacity:.6;padding:4px 8px calc(4px + env(safe-area-inset-bottom));background:#0f0b1e}
#app.playing footer{display:none}
@media (max-width:560px){
  #scorebar{font-size:10px;padding-right:58px;gap:5px}
  .sb-num{font-size:12px}
  .vs{font-size:22px;width:100%;text-align:center;margin:-4px 0}
  .card-pick{padding:12px}
  .pick-emoji{font-size:34px}
  .pick-desc{min-height:0}
}
/* jokes */
.loader{font-size:clamp(14px,3.4vw,22px);background:rgba(0,0,0,.6);padding:10px 16px;border:3px solid #000;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.6}}
.jerry{display:flex;gap:10px;align-items:center;max-width:560px;width:100%;padding:10px 14px;border:var(--px) dashed #666;background:repeating-linear-gradient(45deg,#221a3a 0 10px,#1b1530 10px 20px);opacity:.8;filter:grayscale(.6)}
.jerry-lock{font-size:28px}.jerry-title{font-weight:bold}.jerry-title small{opacity:.7}.jerry-desc{font-size:12px;opacity:.8}
.rot-tag{color:#ffd23f;font-size:14px;min-height:18px;text-shadow:2px 2px 0 #000;text-align:center}
.small-potato{font-size:10px;opacity:.6;margin-top:8px;font-style:italic}
.end-tag{color:#ffd23f;font-size:15px;text-shadow:2px 2px 0 #000;text-align:center}
.ach{list-style:none;width:min(92vw,600px);background:rgba(0,0,0,.35);border:3px solid #000;padding:8px 12px;font-size:13px}
.ach h3{font-size:14px;margin-bottom:4px;color:#ffb347}
.ach li{padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.ach li span{opacity:.65;font-size:11px}
.ach li.off{opacity:.55}
.ach li.on b{color:#9bffb0}
.save-img{width:min(92vw,600px);text-align:center;font-size:12px;color:#ffd23f}
.save-img img{width:100%;height:auto;border:var(--px) solid #000;margin-top:4px;-webkit-touch-callout:default;user-select:auto}