/* Dedicated phone layout for the champion game (play.html), built to the approved mobile mock.
   Loaded last. Under 700px it lays out the existing table DOM as: top bar / opponent strip / table /
   your strip / hand (choosing only) / action bar. The engine, markup and motion director are unchanged. */
html,body,.champion-table,.champion-table button,.test-hand-unit,.champion-table .slot{touch-action:manipulation}
.main-action .picked-name,.mobile-type{display:none}
.main-action .lock-tail{margin:0!important;padding:0}
.champion-table .draw-tracker i{display:none!important}
@media(max-width:700px){#card-hover{position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:var(--m-tip-bottom,320px)!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--m-tip-bottom,320px) - var(--m-tip-ceiling,60px));overflow:auto;box-sizing:border-box;font-size:14px;line-height:1.45;z-index:40;padding:12px 14px;transform:none!important}
 /* Pointer under the panel, at the picked card's center (the panel itself scrolls, so it cannot carry one). */
 body:has(#card-hover:not([hidden])) #app:has(>.champion-table[data-phase="choose"])::after{content:"";position:fixed;left:var(--m-tip-arrow,50%);bottom:calc(var(--m-tip-bottom,320px) - 7px);width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:#10232b;border-right:1px solid #9dada1;border-bottom:1px solid #9dada1;z-index:41;pointer-events:none}
 #card-hover *{font-size:inherit}
 #card-hover h3,#card-hover .hover-card-heading{font-size:17px}}
@media(max-width:700px){
 :root{--m-you:#79d2c0;--m-enemy:#bd9cef;--m-gold:#edbb5f;--m-ink:#f2eee4;--m-muted:#b7c3c9;--m-line:#2c3f4e;--m-panel:#0f1b26cc}
 body{overflow:hidden}
 body>footer,#education-0,#education-1{display:none!important}
 /* ---- frame ---- */
 .champion-table.lab.game-table{position:relative;height:100dvh;min-height:0;overflow:hidden;padding:calc(4px + env(safe-area-inset-top)) 8px 0;gap:6px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40px 48px minmax(0,1fr) 48px auto auto;font-size:15px}
 .champion-table:not([data-phase="choose"]).lab.game-table{grid-template-rows:40px 48px minmax(0,1fr) 48px auto}
 .champion-table .scores{display:contents}
 .champion-table header{grid-row:1;grid-column:1;display:flex;align-items:center;gap:6px;padding:0 2px;flex-wrap:nowrap;min-width:0}
 .champion-table .score.enemy{order:1}
 .champion-table .arena.showdown{order:2}
 .champion-table .score.you{order:3}
 .champion-table .hand-section{order:4}
 .champion-table .turn{order:5}
 .champion-table:not([data-phase="choose"]) .hand-section{display:none}
 /* ---- top bar ---- */
 .champion-table .brand{gap:0}
 .champion-table .brand>b{font-size:22px}
 .champion-table .brand small,.champion-table .brand>span{display:none}
 .champion-table nav{margin-inline-start:auto;gap:4px;flex-wrap:nowrap}
 .champion-table nav button{font-size:12px;font-weight:700;padding:0 9px;min-height:36px;border-radius:10px;background:var(--m-panel);border:1px solid var(--m-line);color:var(--m-ink);white-space:nowrap}
 .champion-table nav button[data-action="fullscreen"]{display:none}
 .champion-table .race-center{grid-row:1;grid-column:1;justify-self:start;align-self:center;position:static;margin-inline-start:44px;min-width:0}
 .champion-table .round{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;border-radius:10px;background:var(--m-panel);border:1px solid var(--m-line);font-size:12px;color:var(--m-muted);white-space:nowrap}
 .champion-table .round>b{font-size:15px;color:var(--m-ink);line-height:1}
 .champion-table .round .link{display:none}
 .champion-table .race-goal{display:none}
 /* ---- player strips ---- */
 .champion-table .score{display:flex;align-items:center;gap:8px;padding:0 6px;min-width:0;position:static}
 .champion-table .score.you{--owner:var(--m-you)}.champion-table .score.enemy{--owner:var(--m-enemy)}
 .champion-table .score-core{display:flex;flex:1 1 auto;gap:8px;align-items:center;min-width:0;max-width:none;margin:0;padding:0}
 .champion-table .avatar-ability{flex:none}
 .champion-table .test-avatar{width:38px;height:38px;padding:1px}
 .champion-table .score-info{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name num" "bar num";column-gap:10px;row-gap:3px;align-items:center}
 .champion-table .score-info>span{grid-area:name;font-size:14px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .champion-table .score-line{grid-area:num;height:auto;gap:0;align-self:center}
 .champion-table .score-line strong{font-size:26px;line-height:1;color:var(--owner)}
 .champion-table .score-line>span,.champion-table .score-line small{display:none}
 .champion-table .score-track{grid-area:bar;height:6px}
 .champion-table .score-track progress{width:100%;height:6px}
 .champion-table .score .test-inventory{display:none!important}
 .champion-table .inventory-cell{font-size:11px;gap:3px}
 .champion-table .hand-count{position:static;left:auto;font-size:11px;padding:3px 7px;border-radius:999px;background:var(--m-panel);border:1px solid var(--m-line)}
 .champion-table .test-pile{font-size:10px;gap:3px}
 .champion-table .test-pile span:last-child{display:none}
 .champion-table .mini-cardback{height:22px;width:16px}
 .champion-table .champion-status{font-size:9px}
 /* ---- table ---- */
 .champion-table .arena.showdown{position:relative;display:block;width:100%;height:100%;margin:0;padding:0;gap:0;overflow:visible;container-type:size}
 .champion-table .arena.showdown::before{content:"";position:absolute;inset:-6px;border-radius:14px;background:radial-gradient(ellipse 65% 60% at 50% 50%,transparent 32%,#050e16cc 80%);pointer-events:none;opacity:0;transition:opacity .4s}
 .champion-table:not([data-phase="choose"]) .arena.showdown::before{opacity:1}
 .champion-table .pot{position:absolute!important;inset:0;width:auto;height:auto;margin:0;padding:0;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:12px;z-index:3;color:var(--m-muted)}
 .champion-table .pot>*{position:static!important;transform:none!important;margin:0!important;inset:auto!important}
 /* choosing: only the triangle and the prize track */
 .champion-table[data-phase="choose"] .side{display:contents}
 .champion-table[data-phase="choose"] .side>:not(.prepared){display:none!important}
 /* While choosing, the setup bonuses stay in view: the rival's above the wheel, yours below it. */
 .champion-table[data-phase="choose"] .prepared{position:absolute;left:0!important;right:0!important;width:auto!important;max-width:none!important;margin:0;height:auto;min-height:0;display:flex;justify-content:center;z-index:4}
 .champion-table[data-phase="choose"] .enemy .prepared{top:4cqh}
 .champion-table[data-phase="choose"] .you .prepared{bottom:4cqh}
 .champion-table[data-phase="choose"] #prize-label,.champion-table[data-phase="choose"] #base-track-host,.champion-table[data-phase="choose"] #prize-number,.champion-table[data-phase="choose"] .margin-equation,.champion-table[data-phase="choose"] #payment-host,.champion-table[data-phase="choose"] .battle-result{display:none!important}
 .champion-table[data-phase="choose"] .pot .type-wheel{display:block;order:-1;width:90px!important;height:90px!important;zoom:clamp(1.2,calc(40cqh / 90px),1.65);opacity:.84;margin:0!important}
 .champion-table .base-track{gap:4px}
 .champion-table .base-track span{width:28px;height:30px;font-size:14px;border-radius:6px;background:var(--m-panel);border:1px solid var(--m-line)}
 .champion-table .base-track span.chosen-base{background:var(--m-gold);color:#0b151e;border-color:var(--m-gold);transform:scale(1.15)}
 /* reveal / result: diagonal cards, strength beside them, prize in the middle */
 .champion-table:not([data-phase="choose"]) .side.battle-position{position:absolute;display:block;width:auto;height:39cqh;aspect-ratio:459/673;z-index:2;container-type:normal;grid-template-rows:none}
 .champion-table:not([data-phase="choose"]) .side.enemy{top:1cqh;left:5cqw;transform:rotate(-5deg);transform-origin:50% 100%;--owner:var(--m-enemy)}
 .champion-table:not([data-phase="choose"]) .side.you{bottom:1cqh;right:5cqw;transform:rotate(4deg);transform-origin:50% 0;--owner:var(--m-you)}
 .champion-table:not([data-phase="choose"]) .side-label{display:none}
 .champion-table:not([data-phase="choose"]) .arena .slot{width:100%!important;height:100%!important;max-width:none;max-height:none;aspect-ratio:auto;margin:0!important;border-radius:10px;box-shadow:0 14px 30px #000a;transition:filter .5s,box-shadow .5s,translate .32s cubic-bezier(.2,.8,.25,1),scale .32s cubic-bezier(.2,.8,.25,1)}
 .champion-table .side.winner .slot{box-shadow:0 0 0 3px var(--owner),0 0 34px var(--owner),0 14px 30px #000a}
 .champion-table .side.winner .slot{translate:0 -6px;scale:1.02}
 .champion-table .side.loser .slot{filter:brightness(.55) saturate(.5);translate:0 4px;scale:.97}
 /* The cards sit diagonally here, so the pot only takes the winner's colour — a sideways lean says nothing. */
 .champion-table .prize-zone.award-you{--award:var(--m-you);--award-lean:0}
 .champion-table .prize-zone.award-enemy{--award:var(--m-enemy);--award-lean:0}
 .champion-table:not([data-phase="choose"]) .strength-orb{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:auto;min-width:0;padding:0;border:0;background:none;box-shadow:none;font-size:58px;font-weight:900;line-height:1;text-align:center;color:var(--owner);text-shadow:0 4px 18px #000d;z-index:3}
 /* The orb fills the empty band beside its card (from the card edge to the arena edge, 5cqw margin) and is
    centered on the card's height. Widths mix cqw (arena) with % (the card, its containing block). */
 .champion-table:not([data-phase="choose"]) .enemy .strength-orb{top:0;bottom:0;left:100%;right:auto;width:calc(95cqw - 100%);transform:rotate(5deg)}
 .champion-table:not([data-phase="choose"]) .you .strength-orb{top:0;bottom:0;right:100%;left:auto;width:calc(95cqw - 100%);transform:rotate(-4deg)}
 .champion-table:not([data-phase="choose"]) .strength-orb small{display:block;font-size:15px;font-weight:700;color:var(--m-muted);margin:0}
 .champion-table:not([data-phase="choose"]) .strength-pips{position:static;transform:none;display:grid;grid-template-columns:repeat(5,11px);grid-template-rows:repeat(var(--pip-rows),11px);gap:5px;width:auto;margin-top:6px}
 .champion-table:not([data-phase="choose"]) .strength-pip{width:11px;height:11px;box-shadow:0 0 8px var(--owner)}
 .champion-table:not([data-phase="choose"]) .bonus-rack{display:none!important;position:absolute;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:150px;transform:none;padding:0;z-index:3}
 .champion-table:not([data-phase="choose"]) .enemy .bonus-rack{top:92px;left:calc(100% + 8px);right:auto;bottom:auto;transform:rotate(5deg)}
 .champion-table:not([data-phase="choose"]) .you .bonus-rack{bottom:92px;right:calc(100% + 8px);left:auto;top:auto;transform:rotate(-4deg)}
 .champion-table:not([data-phase="choose"]) .test-bonus{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;color:#0b151e;background:var(--m-gold);border:0;white-space:nowrap}
 .champion-table:not([data-phase="choose"]) .test-bonus span{display:inline}
 .champion-table:not([data-phase="choose"]) .test-bonus.mobile-type{display:inline-flex;color:var(--m-ink);background:var(--m-panel);border:1px solid var(--m-line)}
 .champion-table:not([data-phase="choose"]) .mobile-type b{font-size:11px}
 .champion-table:not([data-phase="choose"]) .mobile-type.fire b{color:#e78d81}.champion-table:not([data-phase="choose"]) .mobile-type.deal b{color:var(--m-gold)}.champion-table:not([data-phase="choose"]) .mobile-type.expert b{color:var(--m-you)}
 .champion-table:not([data-phase="choose"]) .mobile-type.wins{border-color:var(--m-gold);box-shadow:0 0 0 1px var(--m-gold)}
 .champion-table:not([data-phase="choose"]) .mobile-type.loses{opacity:.55}
 /* Setup badges sit in the orb band beside the card (under the pips), away from the seat reel. */
 .champion-table:not([data-phase="choose"]) .prepared{position:absolute;height:auto;min-height:0;max-width:none;width:calc(95cqw - 100%);margin:0;justify-content:center;z-index:4}
 .champion-table:not([data-phase="choose"]) .enemy .prepared{left:100%;right:auto;top:auto;bottom:5%;transform:rotate(5deg)}
 .champion-table:not([data-phase="choose"]) .you .prepared{right:100%;left:auto;bottom:auto;top:5%;transform:rotate(-4deg)}
 .champion-table .prepared .token{gap:4px;padding:3px 7px;font-size:11px;border-radius:8px}
 .champion-table .prepared .token b{font-size:16px}
 .champion-table .prepared .token .portrait{display:block;width:22px;height:26px}
 .champion-table .prepared .token small{font-size:10px}
 .champion-table:not([data-phase="choose"]) .support-host{position:absolute;left:0;right:0;top:100%}
 .champion-table:not([data-phase="choose"]) .pot{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%)!important;width:max-content;max-width:60cqw;gap:2px;text-align:center}
 .champion-table:not([data-phase="choose"]) .pot .type-wheel{display:none}
 .champion-table:not([data-phase="choose"]) #prize-label{font-size:13px;color:var(--m-muted)}
 .champion-table:not([data-phase="choose"]) #prize-number{font-size:44px;font-weight:900;line-height:1;color:var(--m-gold);text-shadow:0 4px 18px #000c}
 .champion-table:not([data-phase="choose"]) #prize-number:empty{display:none}
 /* Seat reel: the base track is a strip inside a three-cell window; the strip spins (champion-table.js
    spinSeatReel) and the chosen seat stops in the center, then the window hides and only the number stays. */
 .champion-table:not([data-phase="choose"]) #base-track-host{zoom:1;position:relative!important;direction:ltr;width:104px;height:44px;overflow:hidden;margin:0 auto;left:auto;top:auto;transform:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent)}
 .champion-table:not([data-phase="choose"]) #base-track-host::after{content:"";position:absolute;left:50%;top:0;width:32px;height:100%;transform:translateX(-50%);border:2px solid var(--m-gold);border-radius:8px;box-sizing:border-box;pointer-events:none}
 .champion-table:not([data-phase="choose"]) #base-track-host[hidden],.champion-table[data-phase="result"] #base-track-host,.champion-table[data-phase="payout"] #base-track-host{display:none}
 .champion-table:not([data-phase="choose"]) .base-track{position:static!important;left:auto;top:auto;display:flex;gap:4px;width:max-content;height:auto;margin:4px 0 0;transform:translateX(var(--reel-x,-72px));will-change:transform}
 .champion-table:not([data-phase="choose"]) .base-track span{width:32px;height:36px;font-size:17px;flex:none;border-radius:6px}
 .champion-table:not([data-phase="choose"]) .base-track.settled span:not(.chosen-base){opacity:.35}
 .champion-table:not([data-phase="choose"]) .base-track span.chosen-base{transform:none}
 .champion-table:not([data-phase="choose"]) .margin-equation{display:flex;gap:6px;font-size:12px;color:var(--m-muted)}
 .champion-table:not([data-phase="choose"]) .margin-equation:empty,.champion-table:not([data-phase="choose"]) #payment-host{display:none}
 .champion-table:not([data-phase="choose"]) .battle-result{order:-1;font-size:17px;font-weight:900;padding:4px 16px;border-radius:999px;color:#0b151e;background:var(--m-gold);box-shadow:0 6px 18px #000a;margin-bottom:4px!important}
 .champion-table:not([data-phase="choose"]) .battle-result.you{background:var(--m-you)}
 .champion-table:not([data-phase="choose"]) .battle-result.enemy{background:var(--m-enemy)}
 .champion-table:not([data-phase="choose"]) .battle-result:empty{display:none}
 /* ---- hand (choosing) ---- */
 .champion-table .hand-section{display:grid;grid-template-rows:12px auto;gap:0;height:auto;min-height:0}
 .champion-table .hand-title{justify-content:center;padding:0 12px;font-size:12px;color:var(--m-muted);gap:8px;height:12px}
 .champion-table .draw-tracker{display:none}
 .champion-table .hand-title strong{font-size:12px}.champion-table .hand-title small{font-size:11px}
 .champion-table .hand{display:flex;gap:10px;height:auto;min-height:0;justify-content:flex-start;align-items:flex-end;overflow-x:auto;overflow-y:hidden;padding:24px 12px 8px;scroll-snap-type:x mandatory;scroll-padding-inline:12px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
 .champion-table .hand::-webkit-scrollbar{display:none}
 .champion-table .hand:has(.test-hand-unit:nth-child(-n+3):last-child){justify-content:center}
 /* Bigger hand cards while choosing: the arena above only holds the type wheel, so the hand takes the height. */
 .test-hand-unit{flex:0 0 42%;width:42%!important;height:auto!important;aspect-ratio:459/673;scroll-snap-align:start;transition:transform .2s}
 .test-hand-unit .play-card{width:100%;height:100%;min-height:0;transition:box-shadow .2s}
 .test-hand-unit.picked{transform:translateY(-12px) scale(1.04)}
 .test-hand-unit.picked .play-card{box-shadow:0 0 0 3px var(--m-gold),0 0 24px #edbb5f88,0 16px 30px #000b}
 .hand-dots{display:inline-flex;gap:5px;align-items:center}
 .hand-dots i{width:6px;height:6px;border-radius:50%;background:#7e919c66;transition:background .2s,transform .2s}
 .hand-dots i.on{background:var(--m-gold);transform:scale(1.3)}
 /* ---- action bar ---- */
 .champion-table .turn.phase-bar{position:relative;z-index:6;width:calc(100% + 16px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 -8px;padding:10px 14px calc(22px + env(safe-area-inset-bottom));background:#0a141ce8;border-top:1px solid var(--m-line);border-bottom:0;box-shadow:0 -8px 24px #0006;min-height:0}
 .champion-table .turn .phase-actions{display:contents}
 .champion-table .phase-copy{flex:1 1 0;min-width:0;order:1}
 .champion-table .turn strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .champion-table .turn small{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

 .champion-table .phase-actions .link,.champion-table .skip-reveal{order:3;flex:0 0 auto}
 .champion-table .turn .primary.main-action{order:10;flex:1 1 100%;width:100%;min-width:0;max-width:none;height:auto;position:static;inset:auto;transform:none;margin:0;padding:15px 12px;font-size:18px;font-weight:900;border-radius:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;gap:0}
 @media(prefers-reduced-motion:reduce){.test-hand-unit,.champion-table .arena .slot,.champion-table .arena.showdown::before{transition:none}}
}

/* No keyboard on phones: drop the 1-4 shortcut numbers from the hand cards. */
@media(max-width:700px){.champion-table .play-card kbd{display:none!important}}

/* The reveal keeps the orb hidden until the cards flip; the phone display:flex rule must not override that. */
@media(max-width:700px){.champion-table .strength-orb[hidden]{display:none!important}}

@media(max-width:700px){.champion-table .brand .brand-logo{height:32px}}
/* ---- game menu (champion-ui.js menu()) as a bottom sheet ---- */
/* On a phone the rack belongs under the thumb, not centred over the board: full-bleed, anchored to the
   bottom edge, with the safe area paid for so the last plate clears the home indicator. */
@media(max-width:700px){
 #modal.menu-dialog{width:100vw;max-width:none;max-height:88dvh;margin:auto 0 0;border-radius:14px 14px 0 0;padding:0 13px calc(16px + env(safe-area-inset-bottom))}
 #modal.menu-dialog .modal-top{margin:0 -13px;padding:13px 13px 7px}
 #modal.menu-dialog .menu-heading{margin-top:-49px}
 #modal.menu-dialog .menu-heading .brand-logo{height:40px}
 .menu-standing{margin:8px 0 12px;padding-bottom:10px}
 .ms-side b{font-size:20px}
 .menu-actions>button,.menu-actions>a{min-height:50px;font-size:16px}
 .menu-actions>.primary{min-height:52px}
 .menu-actions h3{margin-top:12px}
}