/* SillyFight games: shared "Fight Night" look (boxing poster on newsprint; red, black, mustard) */
:root{--bg:#e8d9b8;--paper:#f3e8cf;--ink:#1f1a15;--primary:#b3261e;--primary-ink:#f7eedb;--accent:#e2a72e;--soft:#ecdcb7;
  --font:"Oswald","Arial Narrow",sans-serif;--head:"Bebas Neue",Impact,"Arial Narrow",sans-serif;--logo:"Rye",Georgia,serif}
*{box-sizing:border-box}
html{background:#d3bb8b;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.35;
  background:url(grain.png) 0 0/200px 200px repeat,radial-gradient(ellipse at 50% 0,#f3e7c9 0,#dcc597 55%,#c9ad78 100%) 0 0/100% 100vh no-repeat,#d3bb8b;
  padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));overflow-x:hidden}
.top{display:flex;flex-direction:column;align-items:center;max-width:820px;margin:6px auto 12px;position:relative}
.top .kicker{font-family:var(--head);font-size:14px;letter-spacing:4px;color:var(--primary)}
.logo{font-family:var(--logo);font-size:clamp(28px,8vw,52px);text-decoration:none;line-height:1.05;margin:2px 0}
.logo .s{color:var(--ink);text-shadow:3px 3px 0 var(--accent)}.logo .f{color:var(--primary);text-shadow:3px 3px 0 var(--ink)}
.top .strap{font-family:var(--head);font-size:15px;letter-spacing:3px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:2px 14px 1px;margin-top:4px;text-align:center}
.back{position:absolute;left:0;top:0;font-family:var(--head);font-size:16px;letter-spacing:1px;color:var(--ink);text-decoration:none;border:2px solid var(--ink);background:var(--paper);padding:4px 8px;box-shadow:2px 2px 0 var(--ink)}
.back{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box;gap:4px}
.back .bl{display:inline}
@media (max-width:600px){.back{width:44px;justify-content:center;padding:0;font-size:20px}.back .bl{display:none}}
.mute{position:absolute;right:0;top:0;width:44px;height:44px;border:2px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);font-size:17px;cursor:pointer}
.card{max-width:820px;margin:0 auto 16px;border:3px solid var(--ink);outline:2px solid var(--ink);outline-offset:-10px;
  background:url(grain.png) 0 0/200px 200px repeat,linear-gradient(180deg,#f6ecd4,#efe2c3);box-shadow:0 16px 30px -12px rgba(50,30,10,.55);padding:24px 22px 22px}
h1,.title{font-family:var(--head);font-weight:400;font-size:clamp(32px,9vw,52px);line-height:.95;letter-spacing:1px;color:var(--primary);text-transform:uppercase;border-bottom:6px double var(--ink);padding-bottom:10px;margin:0 0 12px}
h2{font-family:var(--head);font-weight:400;font-size:28px;letter-spacing:1px;margin:10px 0 6px}
p{margin:6px 0 10px}.sub{font-size:17px}.small{font-size:14px;opacity:.85}.center{text-align:center}
.hl{color:var(--primary)}
label.field{display:block;margin:12px 0}
label.field>span{display:block;font-family:var(--head);font-size:23px;letter-spacing:1.5px;line-height:1;margin-bottom:8px}
input[type=text],input:not([type]){width:100%;background:#fbf5e4;border:0;border-bottom:3px solid var(--ink);border-radius:0;font:inherit;font-size:20px;padding:9px 10px;color:var(--ink)}
input:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:3px solid var(--ink);border-radius:0;background:var(--primary);color:var(--primary-ink);
  font-family:var(--head);font-size:26px;letter-spacing:1.5px;padding:8px 20px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);text-decoration:none;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.alt{background:var(--accent);color:var(--ink)}.btn.ghost{background:var(--paper);color:var(--ink)}.btn.big{width:100%;font-size:32px;min-height:60px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.row>.btn{flex:1 1 140px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.choice{min-height:64px;border:3px solid var(--ink);background:var(--paper);font-family:var(--head);font-size:24px;letter-spacing:1px;cursor:pointer;padding:8px;color:var(--ink);touch-action:manipulation}
.choice.sel{background:var(--primary);color:var(--primary-ink);transform:rotate(-1.5deg);box-shadow:0 0 0 3px var(--accent)}
.choice.right{background:#3d7a35;color:#fff}.choice.wrong{background:#555;color:#ddd;text-decoration:line-through}
.badge{display:inline-block;background:var(--accent);border:2px solid var(--ink);font-family:var(--head);font-size:18px;letter-spacing:1px;padding:2px 10px;transform:rotate(-2deg)}
.big-num{font-family:var(--head);font-size:clamp(64px,20vw,120px);line-height:1;color:var(--primary);text-shadow:4px 4px 0 var(--ink);text-align:center}
.vs{display:flex;align-items:center;justify-content:space-around;gap:8px;text-align:center;margin:10px 0}
.vs .side{flex:1;min-width:0}.vs .side b{display:block;font-family:var(--head);font-size:26px;letter-spacing:1px;overflow-wrap:anywhere}
.vs .side .e{font-size:56px;line-height:1.1}.vs .mid{font-family:var(--head);font-size:40px;color:var(--primary)}
.sharebox input{font-size:16px;margin-bottom:6px}
.err{color:var(--primary);font-weight:600}
.foot{text-align:center;font-family:var(--head);letter-spacing:2px;font-size:14px;opacity:.75;margin:8px 0 20px}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140%);background:var(--ink);color:var(--paper);font-family:var(--head);font-size:20px;letter-spacing:1px;padding:10px 18px;transition:transform .25s;z-index:999;max-width:90vw;text-align:center;pointer-events:none}
#toast.on{transform:translateX(-50%) translateY(0)}
[hidden]{display:none!important}
.screen{animation:pop .25s ease-out}@keyframes pop{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
.bob{animation:bob 1.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px) rotate(-2deg)}75%{transform:translateX(8px) rotate(2deg)}}