/* The Arena on your Chromebook (2026-10-09): the drawn student's question (arena-live.mjs). A dark summons, then the
   same light parchment card as the board, then the wax seal, then how they did. */
.arena-live{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#2b2116;overflow:auto;overscroll-behavior:contain}
.arena-live::backdrop{background:radial-gradient(ellipse at 50% 28%,rgba(52,30,18,.94),rgba(5,8,10,.97) 70%)}
.arena-live>section,.arena-live>article{display:none}
.arena-live[data-view="summons"] .al-summons,.arena-live[data-view="sealed"] .al-sealed,.arena-live[data-view="voted"] .al-voted,.arena-live[data-view="result"] .al-result{display:grid}
.arena-live[data-view="card"] .al-card{display:block}

/* The summons: the student's own character rises, the Arena calls their name. */
.al-summons,.al-sealed,.al-voted,.al-result{min-height:100dvh;place-items:center;align-content:center;gap:12px;text-align:center;color:#f4e5bd;padding:24px;box-sizing:border-box}
.al-figure{height:min(46vh,380px);max-width:80vw;object-fit:contain;filter:drop-shadow(0 0 30px rgba(222,193,122,.55));animation:al-rise 1.2s cubic-bezier(.2,1,.3,1) both}
.al-eyebrow{margin:6px 0 0;letter-spacing:.32em;font:600 13px/1 system-ui,sans-serif;color:#dec17a;animation:al-fade .8s .3s both}
.al-title{margin:0;font:700 clamp(30px,6vw,58px)/1.05 Georgia,serif;text-shadow:0 0 24px rgba(222,193,122,.6);animation:al-pop .9s .45s cubic-bezier(.3,1.4,.5,1) both}
.al-foe{margin:0;font:italic 19px/1.3 Georgia,serif;color:#cbb98f;animation:al-fade .8s .8s both}
.al-foe:empty{display:none}

/* The question: the board's light parchment card. */
.al-card{width:min(880px,calc(100vw - 32px));margin:max(16px,4vh) auto;padding:clamp(18px,3vw,34px);box-sizing:border-box;border-radius:14px;
  background:linear-gradient(180deg,#f8efdc,#efe2c4);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(120,90,40,.35),inset 0 0 70px rgba(160,120,60,.18);
  animation:al-card-in .6s cubic-bezier(.2,1,.3,1) both}
.al-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;font:600 13px/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7a5f36}
.al-clock{display:inline-flex;align-items:center;gap:10px;color:#3d2c17}
.al-clock[hidden]{display:none}
.al-clock-bar{display:block;width:120px;height:8px;border-radius:99px;background:rgba(80,60,30,.2);overflow:hidden}
.al-clock-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b8862f,#e0c072);transition:width .25s linear}
.al-clock-num{font:700 18px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.arena-live.al-hurry .al-clock-fill{background:linear-gradient(90deg,#8e0a1a,#d22b40)}
.arena-live.al-hurry .al-clock-num{color:#a3122a;animation:al-beat 1s ease-in-out infinite}
.arena-live.al-out .al-clock-num{color:#a3122a}
.al-original{margin:14px 0 4px;font:italic 16px/1.4 Georgia,serif;color:#5b4a33}
.al-locked{margin:6px 0 10px;padding:8px 12px;border-radius:8px;background:rgba(201,164,92,.25);border-left:4px solid #b8862f;font:600 16px/1.4 Georgia,serif;color:#3d2c17}
.al-original[hidden],.al-locked[hidden]{display:none}
.al-prompt{margin:14px 0 6px;font:700 clamp(22px,3.2vw,32px)/1.25 Georgia,serif;color:#24180d}
.al-hint{margin:0 0 14px;font:15px/1.4 system-ui,sans-serif;color:#6b5636}
.al-options{display:grid;gap:10px}
.al-option{display:flex;gap:14px;align-items:center;width:100%;padding:14px 16px;text-align:left;cursor:pointer;border-radius:12px;border:1px solid rgba(120,90,40,.45);
  background:linear-gradient(180deg,#fffaf0,#f3e7cc);color:#24180d;font:500 clamp(17px,2.2vw,21px)/1.35 Georgia,serif;box-shadow:0 2px 0 rgba(120,90,40,.25);
  transition:transform .2s,box-shadow .2s,background .2s,opacity .2s;animation:al-rise-in .5s calc(.15s + var(--i,0) * .12s) cubic-bezier(.2,1.2,.4,1) both}
.al-option:hover{transform:translateY(-1px)}
.al-option:focus-visible{outline:3px solid #b8862f;outline-offset:2px}
.al-options:has(.is-picked) .al-option:not(.is-picked){opacity:.7}
.al-option.is-picked{background:linear-gradient(180deg,#fff2c9,#f0d98f);border-color:#b8862f;box-shadow:0 0 0 3px rgba(222,193,122,.7),0 0 28px rgba(222,193,122,.6);transform:translateX(6px)}
/* The answer letters sit in the same painted lanterns as the board (art/arena, Codex's art, 2026-10-09). */
.al-letter{flex:none;display:grid;place-items:center;box-sizing:border-box;width:36px;height:48px;padding-top:9px;background:url('/art/arena/lantern-lit.webp') center/100% 100% no-repeat;
  color:#30160b;font:700 16px/1 Georgia,serif;text-shadow:0 1px 0 #f9df95,0 0 5px rgba(255,236,170,.9)}
.al-option.is-picked .al-letter{filter:brightness(1.2) drop-shadow(0 0 8px rgba(255,186,67,.95))}
.al-error{margin:8px 0 0;color:#a3122a;font:600 15px/1.4 system-ui,sans-serif}
.al-error:empty{display:none}
.al-lock{display:block;width:100%;margin-top:16px;padding:16px;border:0;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,#8e2a2a,#5e1414);color:#fff3dc;
  font:700 20px/1 Georgia,serif;letter-spacing:.04em;box-shadow:0 4px 0 #3a0b0b}
.al-lock:disabled{opacity:.45;cursor:not-allowed}
.al-lock:focus-visible{outline:3px solid #dec17a;outline-offset:3px}
.al-note{margin:10px 0 0;text-align:center;font:13px/1.4 system-ui,sans-serif;color:#7a6a4f}

/* The class vote (2026-10-09): who is answering, and a way to skip. */
.al-who{margin:12px 0 0;font:italic 600 17px/1.35 Georgia,serif;color:#7a4a1e}
.al-who[hidden],.arena-live .al-skip[hidden]{display:none}
.arena-live .al-skip,.arena-live .al-skip:hover{display:block;margin:10px auto 0;padding:8px 18px;border-radius:999px;border:1px solid rgba(120,90,40,.45);background:transparent;color:#6b5636;font:600 14px/1 system-ui,sans-serif}
.arena-live .al-skip:hover{background:rgba(120,90,40,.1)}

/* Locked: the same wax seal as the board, the chosen letter in its centre. */
.al-seal{position:relative;width:180px;height:180px;display:grid;place-items:center;color:#f6db9a;
  background:url('/art/arena/wax-seal.webp') center/contain no-repeat;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
  animation:al-stamp .4s cubic-bezier(.3,1.6,.5,1) both}
.al-seal-letter{font:700 58px/1 Georgia,serif;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.al-seal-word{position:absolute;left:0;right:0;bottom:7%;text-align:center;font:700 12px/1 Georgia,serif;letter-spacing:.2em;text-shadow:0 1px 2px #000}
.al-sealed-title{margin:8px 0 0;font:700 32px/1.1 Georgia,serif}
.al-sealed-detail,.al-result-detail{margin:0;font:18px/1.4 Georgia,serif;color:#cbb98f}

/* How they did. */
.al-result-title{margin:0;font:700 clamp(32px,6vw,54px)/1.1 Georgia,serif;animation:al-pop .7s cubic-bezier(.3,1.4,.5,1) both}
.arena-live.al-win .al-result-title{color:#ffe08a;text-shadow:0 0 30px rgba(255,214,120,.8)}
.al-result-parts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.al-result-parts span{padding:8px 14px;border-radius:999px;font:600 16px/1 system-ui,sans-serif}
.al-result-parts .is-right{background:rgba(46,125,80,.25);color:#bdf2cf;border:1px solid rgba(120,220,160,.5)}
.al-result-parts .is-wrong{background:rgba(160,30,40,.25);color:#ffc2c8;border:1px solid rgba(240,120,130,.5)}
.al-close{margin-top:10px;padding:12px 22px;border-radius:999px;border:1px solid #dec17a;background:transparent;color:#f4e5bd;font:600 16px/1 system-ui,sans-serif;cursor:pointer}
.al-close:focus-visible{outline:3px solid #dec17a;outline-offset:3px}

/* The student page styles every button (dark, with a dark hover). The Arena's buttons keep their own look. */
.arena-live .al-option,.arena-live .al-option:hover{background:linear-gradient(180deg,#fffaf0,#f3e7cc);color:#24180d}
.arena-live .al-option:hover{border-color:#b8862f}
.arena-live .al-option.is-picked,.arena-live .al-option.is-picked:hover{background:linear-gradient(180deg,#fff2c9,#f0d98f)}
.arena-live .al-lock,.arena-live .al-lock:hover{background:linear-gradient(180deg,#8e2a2a,#5e1414);color:#fff3dc}
.arena-live .al-lock:not(:disabled):hover{filter:brightness(1.12)}
.arena-live .al-close:hover{background:rgba(222,193,122,.16)}

@keyframes al-rise{from{opacity:0;transform:translateY(40px) scale(.92)}}
@keyframes al-fade{from{opacity:0}}
@keyframes al-pop{from{opacity:0;transform:scale(.7)}}
@keyframes al-card-in{from{opacity:0;transform:translateY(24px)}}
@keyframes al-rise-in{from{opacity:0;transform:translateY(16px)}}
@keyframes al-stamp{0%{transform:scale(2.4) rotate(-20deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-8deg)}}
@keyframes al-beat{50%{transform:scale(1.12)}}
@media (max-width:560px){.al-clock-bar{width:80px}.al-option{padding:12px}.al-letter{width:30px;height:40px;padding-top:7px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.arena-live *{animation:none!important;transition:none!important}}