/* ===== Mobile design system v2 (Fable pass) ===== */
/* Rhythm 4/8/12/16/24/32 · type: h1 28 · page h2 22 · panel h2 20 · question 19 · body 15 · small 13 · micro 12 · eyebrow 11
   Buttons: primary(blue) / secondary(outline) / hint(amber, bonus=purple) / danger · all 44-52px, nowrap
   Header budget: 96px (brand row 40 + chip row 48). Question + 4 answers land above ~470px on a 390×780 phone. */
@media (max-width:730px){
  :root{--hdr:96px;--tap:44px;--r-sm:10px;--r-md:14px;--r-lg:18px}
  html{scroll-padding-top:calc(var(--hdr) + 8px)}
  body{-webkit-tap-highlight-color:transparent;overflow-x:hidden}
  body .hidden{display:none!important}
  img,svg{max-width:100%}
  *:focus-visible{outline:3px solid rgba(36,87,214,.4);outline-offset:2px}
  input:not([type=checkbox]):not([type=radio]){font-size:16px} /* no iOS zoom */

  /* mobile-only short labels: <el data-m="short">long</el> */
  [data-m]{font-size:0!important;letter-spacing:0}
  [data-m]::before{content:attr(data-m);font-size:var(--m-lbl,14.5px);line-height:1;white-space:nowrap}

  /* ---------- Header: brand row + chip row ---------- */
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"brand account" "nav nav";align-items:center;gap:2px 8px;padding:6px 12px 0;min-height:0;border-bottom:1px solid #e3e8f0}
  .brand{grid-area:brand;display:flex;align-items:center;gap:8px;min-width:0;min-height:40px;padding:0;flex:initial}
  .brand-mark{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
  .brand b{font-size:15px;line-height:1.1;white-space:nowrap}
  .brand small{display:none}
  .account{grid-area:account;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
  .header-score,.coin-pill,.guest-pill{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 9px;font-size:12.5px;border-radius:10px;white-space:nowrap}
  body.guest .header-score,body.guest #openCoinsBtn{display:none}
  .guest-pill{font-size:0;padding:0 8px}
  .guest-pill::before{content:"🔒 ניקוד";font-size:12px}
  #loginBtn{min-height:36px;max-width:120px;padding:0 13px;font-size:13.5px;font-weight:900;border-radius:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 12px rgba(227,147,31,.25)}
  .nav{grid-area:nav;order:initial;display:flex;width:auto;max-width:none;margin:0 -12px;padding:3px 12px 5px;gap:4px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-height:48px;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to left,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to left,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav :is(button,a){flex:0 0 auto;display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:10px;font-size:13.5px;font-weight:700;white-space:nowrap;scroll-snap-align:center}
  .nav :is(button,a).active{background:var(--soft);color:var(--blue);font-weight:900;box-shadow:none}
  body.nav-hidden .nav{max-height:0;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;pointer-events:none}
  .account-menu button{min-height:44px}
  .offline-badge{display:none}

  /* ---------- Screens / rhythm ---------- */
  .screen{width:100%;max-width:100%;min-width:0;padding:8px 12px calc(32px + env(safe-area-inset-bottom))}
  .crumbs{margin:0 0 6px;padding:0;font-size:11.5px;line-height:1.4;width:auto}
  .play-layout{display:flex;flex-direction:column;gap:12px}
  .play-layout>.panel{order:1;min-width:0;max-width:100%}
  .play-layout>.tobi-side{order:2}
  .panel{padding:14px 14px 16px;border-radius:var(--r-lg)}
  .panel h2{font-size:21px;line-height:1.2}
  .panel .sub{font-size:13.5px;line-height:1.5}
  .eyebrow{font-size:11px}
  .difficulty-level,.difficulty-badge{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;font-size:12px;white-space:nowrap;border-radius:999px}
  .difficulty-badge[data-m]{--m-lbl:12px}

  /* ---------- Button system ---------- */
  body .primary,body .secondary,body .hint-btn,body .whatsapp,body .oauth,body .exit-stay,body .exit-confirm,body .exit-leave{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 16px;border-radius:var(--r-md);font-size:15.5px;font-weight:800;line-height:1.1;white-space:nowrap;transition:transform .12s ease,filter .12s ease}
  body .primary{box-shadow:0 6px 16px rgba(36,87,214,.22)}
  body .hint-btn{min-height:44px;padding:0 12px;font-size:14px;border-radius:12px}
  body .text-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 8px;font-size:13.5px;font-weight:700;white-space:nowrap}
  body :is(.primary,.secondary,.hint-btn,.whatsapp,.oauth,.text-btn,.exit-stay,.exit-confirm,.exit-leave,.answer-btn,.word-chip,.cross-key,.leader-tabs button,.game-card):active{transform:scale(.97)}
  .answer-btn:active,.word-chip:active,.cross-key:active{background:var(--soft);border-color:var(--blue)}

  /* ---------- Game panel head: [tile+name | difficulty | skip] / h2 / sub ---------- */
  .title-row,.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"head meta skip" "title title title" "sub sub sub";align-items:center;gap:6px 8px;margin:0 0 10px;flex-wrap:nowrap}
  .title-row>div:first-child,.section-head>div:first-child{display:contents}
  .game-head,.section-head>div:first-child>.eyebrow{grid-area:head;min-width:0}
  .game-head{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;max-width:100%}
  .game-head .tile{width:36px;height:36px;border-radius:11px}
  .game-head .tile .gi{width:20px;height:20px}
  .game-head .eyebrow{white-space:nowrap}
  .title-row .difficulty-level,.section-head .difficulty-level,.section-head>.difficulty-badge,.section-head>div:not(:first-child),.cross-head-meta{grid-area:meta;display:inline-flex;align-items:center;gap:6px;justify-self:end;white-space:nowrap}
  .title-row h2,.section-head h2{grid-area:title;margin:0;font-size:20px;line-height:1.25}
  .title-row .sub,.section-head .sub{grid-area:sub;margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
  #skipWord{grid-area:skip;--m-lbl:13.5px;min-height:36px;padding:0 6px}
  #screen-home .section-head{margin:4px 0 10px}
  #screen-home .section-head h2{font-size:22px}

  /* ---------- Progress, question, answers, feedback, controls ---------- */
  .progressbar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:11.5px;margin:0 0 6px}
  .question-box{padding:6px 0 0}
  .question-icon{font-size:40px;line-height:1;margin:0 0 4px}
  .question-icon .flag-ic{width:88px;border-radius:8px}
  .question-box h3{font-size:19px;line-height:1.3;margin:6px 0 10px}
  .answers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
  .answer-btn{min-height:52px;padding:8px 10px;font-size:15.5px;font-weight:800;line-height:1.25;border-radius:var(--r-md);white-space:normal;overflow-wrap:break-word}
  .feedback{margin:10px 0 0;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.5}
  .fact-line{margin-top:8px;padding:10px 12px;font-size:13.5px}
  .controls{display:flex;flex-wrap:nowrap;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .controls::-webkit-scrollbar{display:none}
  .controls>button{flex:1 1 0;min-width:max-content;min-height:48px;padding:0 14px}
  .win-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:16px}
  .win-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .win-actions>button{width:100%;min-width:0;padding:0 10px;font-size:14.5px}
  .round-card{padding:16px 14px;border-radius:16px}
  .round-card h3{font-size:21px}

  /* ---------- Hot word ---------- */
  .meter{height:10px;margin-top:6px;border-radius:999px}
  .meter-labels{font-size:11.5px;margin:4px 0 10px}
  .form-row{display:flex;flex-direction:row;align-items:stretch;gap:8px}
  .form-row input{flex:1 1 auto;min-width:0}
  .form-row .primary{flex:0 0 auto;min-width:88px;min-height:52px}
  #wordInput{height:52px;font-size:18px;border-radius:var(--r-md);padding:0 14px}
  #wordForm .primary{width:auto;flex:0 0 auto;min-width:92px;min-height:52px;font-size:16px;padding:0 18px}
  .hint-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .hint-row>button{width:100%;min-width:0;padding:0 8px;font-size:13.5px}
  #wordEarnCoinsBtn{grid-column:1/-1;min-height:40px;font-size:13.5px}
  .hint-block{margin:10px 0 0;gap:6px}
  .hint-block .hint-chip{font-size:14.5px;padding:10px 12px;border-radius:12px}
  .bonus-hint-row{padding:8px 10px}
  .history{margin-top:16px;padding-top:12px}
  .history-head h3{font-size:16px;margin:0}
  .history table{min-width:0;width:100%;font-size:14px}
  th,td{padding:9px 6px}

  /* ---------- Connections / Who am I ---------- */
  .word-chip-grid{grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
  .word-chip{min-height:52px;padding:10px 8px;font-size:15.5px;line-height:1.25;border-radius:var(--r-md)}

  /* ---------- 60 seconds ---------- */
  #speedStartView{padding:12px 0 4px!important}
  #speedStartView .question-icon{font-size:44px}
  #speedStartView .sub{font-size:14px;margin:6px 0 12px}
  #speedStart{width:100%;min-width:0!important}
  .speed-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
  .timer-ring{width:64px;height:64px;margin:0;flex:none}
  .timer-ring:after{width:46px;height:46px}
  .timer-ring b{font-size:21px}
  .speed-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:0}
  .speed-stats>*{font-size:12.5px;padding:5px 8px;border-radius:9px}
  .speed-answer-feedback{font-size:14px}
  .speed-answer-feedback.wrong strong{font-size:18px}
  #speedEnd{padding:12px 0 4px!important}
  #speedEnd h3{font-size:24px!important}

  /* ---------- Battle ---------- */
  .battle-how{font-size:13.5px;line-height:1.55;padding:10px 12px;margin:0 0 10px;border-radius:12px}
  .pass-card{padding:12px 0 4px}
  .pass-card .tobi img{width:96px}
  .pass-card h3{font-size:22px;margin:6px 0 4px}

  /* ---------- Crossword ---------- */
  .crossword-panel{padding:12px 10px 10px}
  #crossIntro{font-size:13px;padding:8px 10px;margin:0 0 8px}
  .crossword-layout{display:block}
  .cross-board-side{display:flex;flex-direction:column;gap:8px}
  .cross-grid{width:min(100%,340px);margin:0 auto;border-width:3px;border-radius:12px}
  .cross-cell{font-size:clamp(16px,5.4vw,24px)}
  .cross-num{font-size:8px;top:1px;left:2px}
  /* order: grid → active clue (sticky above keyboard) → keyboard (sticky) → controls → feedback → win */
  .cross-active-clue{order:1;position:sticky;bottom:calc(190px + env(safe-area-inset-bottom));z-index:21;background:var(--navy);color:#fff;border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.4;box-shadow:0 8px 20px rgba(20,33,61,.18)}
  .cross-keyboard{order:2;position:sticky;bottom:calc(4px + env(safe-area-inset-bottom));z-index:20;background:rgba(245,247,251,.97);backdrop-filter:blur(8px);border-radius:14px;padding:5px 4px;gap:5px;box-shadow:0 -8px 24px rgba(20,33,61,.10)}
  .cross-keyboard>*{gap:5px}
  .cross-key{flex:none;width:33px;height:38px;font-size:17px;border-radius:8px}
  .cross-key.backspace{width:64px}
  .cross-controls{order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cross-controls>button{min-width:0;padding:0 8px;font-size:13.5px}
  #crossCheck{grid-column:1/-1}
  #crossFeedback{order:4;margin:0}
  #crossWin{order:5}
  .cross-clues{display:block;padding:12px;margin-top:12px;border-radius:14px}
  .cross-clues section{margin-top:10px}
  .cross-title-row{display:flex;gap:12px;font-size:13px}
  .cross-clues h3{font-size:15px;margin:10px 0 6px}
  .cross-clue-list>*{min-height:40px;padding:8px 10px;font-size:14px;line-height:1.35}

  /* ---------- Owl side card ---------- */
  .tobi-side{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:12px;border-radius:16px;align-items:center}
  .tobi-side .tobi img{width:64px;max-height:none}
  .tobi-side .tobi-badge{width:24px;height:24px;font-size:12px}
  .tobi-side .tobi-bubble{font-size:13px;padding:9px 10px;border-radius:12px}
  .tobi-side .side-stats{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
  .side-stats>div{padding:6px 8px;border-radius:10px}
  .side-stats small{font-size:11px}
  .side-stats b,.side-generic .side-stats b{font-size:15px}

  /* ---------- Home: hero ---------- */
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"eyebrow owl" "h1 owl" "p owl" "cta cta";gap:4px 10px;align-items:center;min-height:0;padding:4px 0 8px}
  .hero>div:first-child{display:contents}
  .hero>div:first-child>.eyebrow{grid-area:eyebrow;justify-self:start;font-size:11px}
  .hero h1{grid-area:h1;font-size:28px;letter-spacing:-.8px;line-height:1.08;margin:6px 0 4px}
  .hero p{grid-area:p;font-size:14px;line-height:1.5;margin:0}
  .hero-mascot{grid-area:owl;order:initial;align-self:center;justify-self:center}
  .hero-mascot img{width:104px;filter:drop-shadow(0 10px 14px rgba(24,42,80,.16))}
  .speech{display:none}
  .hero-actions{grid-area:cta;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .hero-actions .primary,.hero-actions .secondary{width:100%;min-height:48px;padding:0 10px;font-size:14.5px;--m-lbl:14.5px}
  /* guest strip */
  body.guest .guest-strip{display:grid}
  .guest-strip{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:12px 0 16px;padding:10px 12px;font-size:13px;line-height:1.45;text-align:right;border-radius:14px}
  .guest-strip>div{min-width:0}
  #guestStripLogin{min-height:42px;padding:0 14px;font-size:14px;border-radius:12px}
  /* stats strip (accounts) */
  .stats-strip{grid-template-columns:repeat(3,1fr);margin-bottom:16px;border-radius:16px}
  .stats-strip>div{min-height:64px;padding:10px 6px}
  .stats-strip strong{font-size:19px}
  .stats-strip small{font-size:11px}
  /* game list rows */
  .game-grid{gap:8px}
  .game-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"icon title play" "icon desc play";column-gap:12px;row-gap:2px;align-items:center;min-height:72px;padding:12px;border-radius:16px;cursor:pointer}
  .game-card .game-icon{grid-area:icon;width:48px;height:48px;border-radius:13px;align-self:start}
  .game-card .game-icon .gi{width:26px;height:26px}
  .game-card .tag,.game-card .card-meta{display:none}
  .game-card h3{grid-area:title;margin:0;font-size:16.5px;line-height:1.2}
  .game-card p{grid-area:desc;display:block;margin:0;font-size:12.5px;line-height:1.4;color:var(--muted);overflow:visible;-webkit-line-clamp:unset}
  .game-card .primary{grid-area:play;align-self:center;min-height:40px;padding:0 14px;font-size:0;border-radius:11px;background:var(--soft);color:var(--blue);box-shadow:none}
  .game-card .primary::before{content:"שחקו";font-size:14px;font-weight:900}

  /* ---------- Leaderboard ---------- */
  .leader-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:0 0 10px;flex-direction:row}
  .leader-head>div{min-width:0}
  .leader-head .eyebrow{font-size:11px}
  .leader-head h2{font-size:22px;line-height:1.2;margin:4px 0 0}
  .leader-head .sub{display:block;font-size:12px;line-height:1.4;margin-top:2px;color:var(--muted)}
  #globalShare{min-height:40px;padding:0 12px;font-size:13px;flex:none;border-radius:11px}
  .leader-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#e9edf5;border-radius:12px;margin:0 0 12px;overflow:visible}
  .leader-tabs button{min-height:40px;padding:0 6px;font-size:13.5px;border-radius:9px;white-space:nowrap;background:transparent;border:0}
  .leader-tabs button.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(36,87,214,.25)}
  .leader-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .leader-card,.profile-card{padding:14px;border-radius:16px}
  .podium{gap:6px;align-items:end}
  .podium>div{padding:10px 4px;border-radius:12px}
  .podium span{font-size:24px}
  .podium b{font-size:13px}
  .podium small{font-size:11px}
  .podium .first{min-height:112px}
  .podium .second{min-height:94px}
  .podium .third{min-height:84px}
  .my-rank{padding:10px 12px;font-size:14.5px;border-radius:12px;margin:10px 0}
  #rankList>*{min-height:48px;font-size:14.5px}
  .profile-card .tobi img{width:84px}
  .profile-stat{padding:8px 0;font-size:14px}

  /* ---------- About / legal ---------- */
  #screen-about .panel img{max-width:150px}
  .legal-screen h2{font-size:18px}
  .legal-screen .panel p{font-size:15px;line-height:1.6}

  /* ---------- Thoughts block ---------- */
  .player-thoughts-bottom{margin-top:24px;padding:12px;gap:8px;border-radius:16px}
  .thoughts-bottom-label{min-width:0}
  .thoughts-bottom-label h2{font-size:15px}
  .thought-card{min-width:220px;padding:10px 12px}
  .player-thoughts-bottom .thought-card span{font-size:12.5px}
  .thought-report{width:32px;height:32px;font-size:15px;opacity:.7}
  .thought-compose summary{width:100%;margin:0;min-height:44px;padding:0 12px;font-size:13px;border-radius:12px}
  .player-thoughts-bottom .thought-form{position:static;width:100%;grid-template-columns:1fr auto;gap:8px;padding:0}
  .thought-form input{min-height:48px;font-size:16px;min-width:0}
  .player-thoughts-bottom .thought-form button{width:auto;min-width:76px}
  .player-thoughts-bottom .thoughts-note{display:block;font-size:11px}

  /* ---------- Footer ---------- */
  .site-footer{padding:24px 16px calc(24px + env(safe-area-inset-bottom));font-size:14px}
  .site-footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
  .site-footer a{display:flex;align-items:center;min-height:40px;line-height:1.3}

  /* ---------- Modals: bottom sheets ---------- */
  .modal{padding:0;place-items:end center}
  .modal-card{width:100%!important;max-width:none;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .modal-card::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#d7dde8;margin:0 auto 12px}
  .modal-close{width:40px;height:40px;top:12px;left:12px}
  .modal-card .tobi img{width:96px}
  .modal-card h2{font-size:21px;line-height:1.25;margin:6px 0}
  .modal-card p{font-size:14px;line-height:1.55}
  .modal-card input{min-height:48px;font-size:16px;border-radius:12px}
  .modal-card .primary,.modal-card .oauth{width:100%;min-height:50px}
  .login-or{margin:10px 0}
  .login-note{font-size:12px}
  .exit-game-card{padding:12px 16px calc(16px + env(safe-area-inset-bottom));text-align:center}
  .exit-game-icon{width:56px;height:56px;border-radius:16px;font-size:26px;margin:0 auto 8px}
  .exit-game-card h2{font-size:22px}
  .exit-warning{font-size:13.5px;padding:10px 12px;border-radius:12px}
  .exit-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
  .exit-actions .exit-stay{order:-1}
  .exit-actions .exit-confirm{order:0}
  .exit-actions>button{width:100%;min-height:50px}
  .coin-modal h2{font-size:19px}
  .coin-modal p{font-size:13.5px;line-height:1.5}
  .coin-actions{grid-template-columns:1fr;margin-top:10px}
  .coin-card{padding:12px}
  .wheel-wrap{width:200px;height:200px}
  .wheel-label{font-size:13px;min-width:34px;padding:2px 5px}
  #spinWheelBtn,#startQuickCoinBtn{width:100%;--m-lbl:15.5px}
  #earnCoinsEyebrow .coin-ic{display:inline-block;width:14px;height:14px;vertical-align:-2px}

  /* ---------- Toasts: thumb zone; on crossword go under the header (keyboard owns the bottom) ---------- */
  .game-toast{top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom));width:calc(100% - 32px);max-width:420px;padding:11px 14px;font-size:14px;line-height:1.4;border-radius:14px}
  .game-toast.show{transform:translateX(-50%) translateY(0)}
  body:has(#screen-crossword.active) .game-toast{top:calc(var(--hdr) + 8px)!important;bottom:auto}
}

@media (max-width:390px){
  .screen{padding-inline:10px}
  .panel{padding-inline:12px}
  .hero{grid-template-columns:minmax(0,1fr) 92px}
  .hero-mascot img{width:92px}
  .hero h1{font-size:26px}
  .answers{grid-template-columns:1fr 1fr}
  .answer-btn{font-size:15px}
  .hint-row{grid-template-columns:1fr 1fr}
  .hint-row>button{font-size:13px}
  #wordEarnCoinsBtn{grid-column:1/-1}
  .cross-key{width:31px}
  .cross-key.backspace{width:58px}
  .progressbar{font-size:11px}
}

@media (max-width:360px){
  .brand>span:not(.brand-mark){display:none}      /* icon-only brand */
  .guest-pill::before{content:"🔒"}
  #loginBtn{max-width:100px;padding:0 10px}
  .header-score,.coin-pill{padding:0 7px}
  .game-card{grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px}
  .game-card .game-icon{width:44px;height:44px}
}

/* ===== v2.1 fixes from device testing ===== */
@media (max-width:730px){
  body:not(.guest) .guest-pill{display:none!important}
  /* signed in: name + coins + points need the row → brand becomes icon-only */
  body:not(.guest) .brand>span:not(.brand-mark){display:none}
  body:not(.guest) #loginBtn{max-width:104px;padding:0 10px;font-size:13px}
  body:not(.guest) .header-score,body:not(.guest) .coin-pill{padding:0 7px;font-size:12px;gap:3px}
  .account{flex-wrap:nowrap;overflow:hidden}
  /* game content blocks share one width */
  .answers{max-width:none;margin:10px 0;width:100%}
  .question-box{padding:6px 0 0;margin:0;width:100%}
  .question-box h3{padding:0}
  .clues,.clue-list,.word-chip-grid,.form-row,.feedback,.controls,.hint-block{width:100%;max-width:none;margin-left:0;margin-right:0}
  .stats-strip strong{font-size:17px}
  .stats-strip>div:last-child strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}
@media (max-width:730px){
  .sport-tab{flex:1 1 0;min-width:0;padding:0 6px!important;font-size:13.5px!important;min-height:44px!important}
  .sport-tab .coin-ic{width:.9em;height:.9em}
}
@media (max-width:730px){.sport-tabs{flex-wrap:nowrap!important;gap:6px!important}}
/* panels must fill the width (desktop .play-layout has align-items:start, which shrink-wraps flex children) */
@media (max-width:730px){
  .play-layout{align-items:stretch!important;justify-content:flex-start}
  .play-layout>.panel,.play-layout>.tobi-side{width:100%;max-width:100%;box-sizing:border-box}
  .screen>.panel,.screen>section.panel{width:100%}
}
/* signed in: keep the site name; the account button becomes a round avatar so the row fits */
@media (max-width:730px){
  body:not(.guest) .brand>span:not(.brand-mark){display:block}
  body:not(.guest) .brand b{font-size:14px}
  body:not(.guest) #loginBtn{font-size:0;width:38px;min-width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;display:inline-grid;place-items:center;flex:none}
  body:not(.guest) #loginBtn::before{content:"👤";font-size:17px;line-height:1}
  body:not(.guest) .header-score,body:not(.guest) .coin-pill{padding:0 7px;font-size:12px;min-height:34px}
  .account{gap:5px}
}
@media (max-width:360px){body:not(.guest) .brand>span:not(.brand-mark){display:none}}
/* toasts: under the header (the bottom belongs to buttons and sheets); never over an open modal */
@media (max-width:730px){
  .game-toast{top:calc(var(--hdr) + 10px)!important;bottom:auto!important;transform:translateX(-50%) translateY(-8px)}
  .game-toast.show{transform:translateX(-50%) translateY(0)}
  body.nav-hidden .game-toast{top:56px!important}
  body:has(.modal:not(.hidden)) .game-toast{opacity:0!important;pointer-events:none}
}
/* stable header: no collapse animation (it jittered on real devices); keep smooth scrolling off on touch */
@media (max-width:730px){
  body.nav-hidden .nav{max-height:48px;opacity:1;pointer-events:auto;margin:0 -12px;padding:3px 12px 5px}
  .nav{transition:none}
  html{scroll-behavior:auto}
  .topbar{will-change:auto;transform:translateZ(0)}
}