:root{
    --ink:#0D1014;--panel:#161B22;--panel-2:#1E242D;--line:#2C3440;
    --bone:#ECE6DA;--mute:#8A93A0;--pick:#FFD60A;
    --t1:#F2913C;--t2:#63BF8E;
    /* "Effective" viewport units: equal to real vw/vh everywhere by default.
       Overridden (swapped) only inside #scGame.on during the portrait-rotation
       fallback below, so every clamp()/calc() in the game screen that uses
       var(--evw)/var(--evh) instead of raw vw/vh automatically sizes against
       the ROTATED effective viewport, not the device's true physical one. */
    --evw:1vw;--evh:1vh;
  }
  *{box-sizing:border-box}
  html,body{overflow-x:hidden;max-width:100%;touch-action:manipulation}
  body{margin:0;background:var(--ink);color:var(--bone);font-family:Tajawal,system-ui,sans-serif;min-height:100vh;
       padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
       padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .screen{display:none}.screen.on{display:block}

  /* ---------- splash ---------- */
  .splash{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;
          transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
  .splash .hexmark{width:88px;height:88px;display:block;animation:splashPop .5s cubic-bezier(.34,1.56,.64,1) both}
  .splash.hide{transform:translateY(-100%)}
  @keyframes splashPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){
    .splash{transition:none}.splash .hexmark{animation:none}
  }

  /* ---------- home ---------- */
  .home{position:relative;min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        display:grid;place-items:center;padding:24px;
        background:radial-gradient(120% 80% at 50% -10%, #1A222C 0%, var(--ink) 60%)}
  .home::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:60px;
                background:radial-gradient(120% 260% at 50% 100%, #1A222C 0%, var(--ink) 60%);
                pointer-events:none}
  .home-in{width:100%;max-width:560px;transform:translateY(-20px)}
  .brand{text-align:center;margin-bottom:26px}
  .hexmark{width:64px;height:64px;margin:0 auto 14px;display:block}
  .brand h1{margin:0;font:900 clamp(28px,5vw,44px) Tajawal;letter-spacing:-.01em;
            background:linear-gradient(100deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent;caret-color:var(--bone)}
  .brand h1[contenteditable]:focus{outline:0;border-bottom:2px dashed var(--line)}
  .brand p{margin:8px 0 0;font:500 13px Tajawal;color:var(--mute)}
  .menuBrand{margin-bottom:34px}
  .menuBrand .hexmark{width:80px;height:80px}
  .menuBrand h1{font-size:clamp(34px,6.5vw,54px)}
  .menuBrand p{font-size:15px}

  .start{width:100%;border:0;border-radius:14px;padding:18px;margin-bottom:18px;cursor:pointer;
         font:900 clamp(16px,2vw,20px) Tajawal;color:#101317;
         background:linear-gradient(100deg,var(--t1),var(--t2))}
  .start:active{transform:translateY(1px)}

  .backBtn{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:8px;cursor:pointer;
           background:none;color:var(--mute);font:700 clamp(14px,1.6vw,17px) Tajawal;text-align:center}
  .backBtn:hover{border-color:var(--mute);background:var(--panel-2);color:var(--bone)}

  .row{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;
       display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .row>span{font:700 14px Tajawal}
  .rowLabel{display:inline-flex;align-items:center;gap:6px}
  .infoBtn{border:0;background:none;color:var(--mute);font:700 15px Tajawal;cursor:pointer;padding:0;
           line-height:1;display:inline-flex;align-items:center}
  .infoBtn:hover{color:var(--bone)}
  .seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
  #segSize{margin-inline:auto}
  .seg button{border:0;background:none;color:var(--mute);font:700 13px Tajawal;padding:7px 14px;border-radius:8px;cursor:pointer}
  .seg button.on{background:var(--bone);color:#12161B}
  .swatches{display:flex;gap:7px;flex-wrap:wrap;max-width:min(100%,calc(5*26px + 4*7px))}
  .sw{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;flex:none}
  .sw.on{border-color:var(--bone)}
  .teamline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%}
  .dot{width:12px;height:12px;border-radius:50%;flex:none}
  .teamName{width:clamp(90px,32vw,150px);max-width:100%;min-width:0;box-sizing:border-box;
            background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
            padding:6px 10px;font:700 16px Tajawal;color:var(--bone)}
  .teamName::placeholder{color:var(--mute)}
  .hint{font:500 11px Tajawal;color:var(--mute);flex-basis:100%}
  .bottomRow{margin-bottom:0}
  html[dir=ltr] .bottomRow{flex-direction:row-reverse}
  .qbBox{border:1px dashed var(--line);background:var(--panel-2);color:var(--mute);border-radius:10px;
         padding:10px 16px;font:700 13px Tajawal;cursor:pointer;transition:border-color .15s,color .15s}
  .qbBox:hover{color:var(--bone);border-color:var(--mute)}

  /* ---------- game ---------- */
  /* Forced-landscape fallback for the game screen specifically: the native
     ScreenOrientation lock is unreliable on iPad (see CLAUDE.md), so when the
     game screen is on-screen and the device/viewport is physically portrait,
     rotate the whole screen 90deg and swap its footprint to the viewport's
     landscape-equivalent dimensions, so the board always renders in its
     existing, correct landscape layout regardless of physical orientation.
     Scoped to #scGame.on only — never touches the home or tournament
     screens, and is a no-op whenever the viewport is already landscape
     (which is always true on iPhone, since its native lock does work). */
  @media (orientation:portrait){
    #scGame.on{
      position:fixed;
      top:calc(50vh - 50vw);left:calc(50vw - 50vh);
      width:100vh;height:100vw;
      transform-origin:center center;
      transform:rotate(90deg);
      overflow:hidden;
      /* swap the effective-unit basis: the rotated box's visual width now
         equals the true viewport's height, and vice versa */
      --evw:1vh;--evh:1vw;
    }
    #scGame.on .wrap{height:100%;width:100%}
  }
  .wrap{display:grid;grid-template-columns:clamp(150px,calc(18 * var(--evw)),260px) minmax(0,1fr);gap:0;padding:0;max-width:1500px;margin:0 auto;align-items:stretch;
        height:calc(100 * var(--evh) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  html[dir=ltr] .wrap{grid-template-columns:minmax(0,1fr) clamp(150px,calc(18 * var(--evw)),260px)}
  html[dir=ltr] .panel{order:2}
  .stage{display:flex;flex-direction:column;gap:10px;min-height:0;position:relative;
         margin-top:calc(-1 * env(safe-area-inset-top));margin-bottom:calc(-1 * env(safe-area-inset-bottom));
         margin-left:calc(-1 * env(safe-area-inset-left));
         height:calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
         width:calc(100% + env(safe-area-inset-left))}
  .stage::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:44px;background:var(--t1);pointer-events:none}
  .boardWrap{position:relative;width:100%;height:100%;min-height:0}
  /* Background is var(--t1), not white: this color is a fallback that ONLY
     ever shows through where the SVG's own content doesn't fully reach the
     box (a residual letterbox sliver from any imperfect aspect-ratio
     match) — the hex cells' actual white fill comes from the SVG's own
     fill="#fff" attribute, not from this. Any such sliver is always at the
     top/bottom (both zone-fill bands are cfg.t1, see board.js), on any
     device/orientation/aspect ratio, without needing to size a cover for
     an unknown gap — this fixes it at the source instead of guessing a
     decorative overlay's height per device (an iPad-specific attempt at
     that was tried, worked on one model, and was reported still visibly
     white on another — replaced by this, don't reintroduce that pattern). */
  .board{background:var(--t1);width:100%;height:100%}
  .board svg{display:block;width:100%;height:100%}
  .bar{display:flex;gap:8px}
  .ghost{flex:1;background:none;border:1px solid var(--line);color:var(--mute);border-radius:10px;padding:clamp(7px,calc(.8 * var(--evw)),11px);font:600 clamp(10px,calc(.9 * var(--evw)),13px) Tajawal;cursor:pointer}
  .ghost:hover{color:var(--bone);border-color:var(--mute)}
  .ghost:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
  .overlay{position:absolute;inset:0;display:none;place-items:center;background:rgba(8,10,13,.74);border-radius:16px;padding:20px}
  .overlay.show{display:grid}
  #qbOverlay{position:fixed;border-radius:0}
  .card{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--c,var(--t1));border-radius:16px;padding:clamp(18px,calc(2.4 * var(--evw)),32px);text-align:center;max-width:460px;width:100%}
  .card .kicker{font:600 clamp(10px,calc(.9 * var(--evw)),13px) Tajawal;color:var(--mute);letter-spacing:.04em}
  .card h2{margin:8px 0 6px;font:900 clamp(20px,calc(2.4 * var(--evw)),34px) Tajawal;color:var(--c);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card p{margin:0 0 18px;font:500 clamp(11px,var(--evw),15px) Tajawal;color:var(--mute)}
  .acts{display:flex;gap:10px}
  .solid{flex:1;border:0;border-radius:11px;padding:clamp(9px,var(--evw),13px);font:700 clamp(11px,var(--evw),15px) Tajawal;color:#121212;background:var(--c);cursor:pointer}

  #obOverlay{position:fixed;z-index:500}
  #confirmOverlay{position:fixed;z-index:600}
  .confirmMsg{margin:0 0 20px;font:700 15px Tajawal;color:var(--bone);line-height:1.6;text-align:center}

  #infoOverlay{position:fixed;z-index:550}
  .infoCard{max-width:480px;max-height:calc(100vh - 40px);overflow-y:auto}
  .infoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0 4px}
  .infoImgSlot{position:relative;aspect-ratio:1/1;border:1px dashed var(--line);border-radius:10px;
               background:var(--panel-2);display:flex;align-items:center;justify-content:center;
               overflow:hidden;padding:8px}
  .infoImgSlot img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px}
  .infoImgSlot img.loaded{display:block}
  .infoImgLabel{font:700 12px Tajawal;color:var(--mute);text-align:center}
  .infoOptCaption{margin-top:6px;font:700 13px Tajawal;color:var(--bone);text-align:center}
  .infoOption.spanCenter{grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}

  #updateOverlay{position:fixed;z-index:900}
  #updateBtn{display:flex;align-items:center;justify-content:center;text-decoration:none}

  .obCard{max-height:calc(100vh - 40px);overflow-y:auto}
  .obLogo{width:60px;height:60px;display:block;margin:0 auto 14px}
  .obLangHead{font:900 clamp(17px,calc(1.9 * var(--evw)),26px) Tajawal;color:var(--bone);margin:2px 0}
  .obLangBtns{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .obTitle{font:900 clamp(20px,calc(2.2 * var(--evw)),30px) Tajawal;color:var(--bone);margin:0 0 14px}
  .obRules{margin:0 0 16px;padding-inline-start:22px;text-align:start}
  .obRules li{font:500 clamp(12px,var(--evw),15px) Tajawal;color:var(--bone);line-height:1.5;margin-bottom:9px}
  .obRules li:last-child{margin-bottom:0}
  .obTip{margin:0 0 18px;padding-top:14px;border-top:1px solid var(--line);font:600 clamp(11px,var(--evw),14px) Tajawal;color:var(--mute);text-align:start}

  @media (min-width:600px){
    .obCard{max-width:min(680px,65vw);padding:clamp(28px,3.2vw,44px)}
    .obLangHead{font:900 clamp(22px,2.2vw,30px) Tajawal}
    .obTitle{font:900 clamp(26px,2.6vw,36px) Tajawal}
    .obRules li{font:500 clamp(15px,1.3vw,19px) Tajawal;margin-bottom:12px}
    .obTip{font:600 clamp(13px,1.2vw,17px) Tajawal}
    .obCard .solid{font-size:clamp(18px,1.6vw,24px);padding:clamp(14px,1.6vw,20px)}
  }

  .panel{display:flex;flex-direction:column;gap:clamp(8px,var(--evw),14px);overflow-y:auto;overflow-x:hidden;min-height:0;
         padding:clamp(10px,calc(1.6 * var(--evw)),22px);
         margin-right:calc(-1 * env(safe-area-inset-right))}
  .sideTitle{margin:0;text-align:center;font:900 clamp(22px,calc(2.6 * var(--evw)),36px) Tajawal;letter-spacing:-.01em;
             text-wrap:balance;min-width:0;
             background:linear-gradient(100deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .chipRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .chip{align-self:flex-start;font:600 clamp(9px,calc(.7 * var(--evw)),11px) Tajawal;color:var(--mute);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
  .chip b{color:var(--bone);font-family:Rajdhani;font-size:clamp(10px,calc(.85 * var(--evw)),13px);margin-inline-start:5px}
  .modeToggle{display:flex;align-items:center;gap:4px;font:600 clamp(9px,calc(.7 * var(--evw)),11px) Tajawal;color:var(--mute);
              background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;
              white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .modeToggle .modeIcon{font-size:1.1em;line-height:1}
  .modeToggle.on{background:var(--bone);color:#12161B;border-color:var(--bone)}
  .now{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(10px,calc(1.1 * var(--evw)),16px);display:flex;align-items:center;gap:clamp(8px,var(--evw),14px)}
  .tile{width:clamp(44px,calc(5 * var(--evw)),74px);height:clamp(50px,calc(5.6 * var(--evw)),84px);flex:none;display:grid;place-items:center;padding-top:8px;border-radius:12px;background:var(--panel-2);border:1px dashed var(--line);font:900 clamp(24px,calc(2.6 * var(--evw)),40px) Tajawal;color:var(--mute)}
  .tile.live{background:var(--pick);border:1px solid #C9A700;color:#161B22}
  .btns{display:flex;flex-direction:column;gap:8px}
  .btn{flex:1;min-width:0;min-height:clamp(30px,calc(3 * var(--evw)),38px);border:0;border-radius:10px;padding:clamp(7px,calc(.8 * var(--evw)),11px) 6px;font:700 clamp(11px,var(--evw),14px) Tajawal;color:#121212;cursor:pointer;opacity:.35;pointer-events:none;transition:opacity .18s;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn.live{opacity:1;pointer-events:auto}
  .log{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(7px,calc(.8 * var(--evw)),11px)}
  .log header{display:flex;align-items:center;justify-content:center;margin-bottom:6px}
  .tally{font-family:Rajdhani;font-weight:700;font-size:clamp(34px,calc(4.2 * var(--evw)),54px);font-variant-numeric:tabular-nums}
  .tally .x{color:var(--line);margin:0 10px}
  .log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:80px;overflow:auto}
  .log li{display:flex;align-items:center;gap:6px;font:500 clamp(9px,calc(.8 * var(--evw)),11px) Tajawal;color:var(--mute);border-top:1px solid var(--line);padding-top:4px}
  .log li:first-child{border-top:0;padding-top:0}
  .log li i{width:9px;height:9px;border-radius:50%;flex:none}
  .log li b{color:var(--bone);margin-inline-start:auto}
  polygon.cell{cursor:pointer;transition:fill .15s}
  text.ltr{font:700 46px Tajawal;pointer-events:none;user-select:none}
  :focus-visible{outline:2px solid var(--pick);outline-offset:2px}

  /* ---------- tournament ---------- */
  .tourBtn{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:18px;
           cursor:pointer;background:var(--panel);color:var(--bone);font:700 clamp(14px,1.6vw,17px) Tajawal;text-align:center}
  .tourBtn:hover{border-color:var(--mute);background:var(--panel-2)}
  .comingSoonRow{width:100%;border:1px dashed var(--line);border-radius:14px;padding:14px;margin-bottom:18px;
                 cursor:pointer;background:var(--panel-2);color:var(--mute);font:700 clamp(14px,1.6vw,17px) Tajawal;text-align:center;
                 transition:border-color .15s,color .15s}
  .comingSoonRow:hover{border-color:var(--mute);color:var(--bone)}
  .tour-in{max-width:640px}
  .tourStep{display:flex;flex-direction:column;gap:16px}
  .tourSizeSeg{justify-content:center}
  .tourNav{display:flex;gap:10px;margin-top:8px}
  .tourNav .ghost{flex:1}
  .tourNavNext{flex:1;border:0;border-radius:11px;padding:12px;font:700 14px Tajawal;color:#101317;
               cursor:pointer;background:linear-gradient(100deg,var(--t1),var(--t2))}
  .tourNavNext:disabled{opacity:.4;cursor:not-allowed}

  .tourTeams{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  @media (max-width:480px){.tourTeams{grid-template-columns:minmax(0,1fr)}}
  .tourTeamRow{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
               border-radius:10px;padding:8px 10px}
  .tourNameInput{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
                 padding:6px 8px;font:700 16px Tajawal;color:var(--bone)}
  .tourSwatchToggle{width:26px;height:26px;border-radius:8px;border:2px solid var(--bone);cursor:pointer;flex:none;padding:0}
  .tourNameBig{width:100%;text-align:center;padding:14px;font:700 clamp(16px,2vw,22px) Tajawal}
  .tourColorPicker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;background:var(--panel);
                   border:1px solid var(--line);border-radius:12px;padding:10px}
  .tourColorPicker .sw{width:auto;aspect-ratio:1;height:auto}
  .tourColorPicker[hidden]{display:none}

  .tourNameTag{margin:0 0 4px;text-align:center;font:600 13px Tajawal;color:var(--mute)}

  .tourBracketWrap{position:relative}
  .tourBracket{display:flex;justify-content:center;gap:18px;overflow-x:auto;padding-bottom:8px}
  .tourSkipHint{position:absolute;top:6px;inset-inline-end:6px;font:600 11px Tajawal;color:var(--mute);
               background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
               cursor:pointer;z-index:2;transition:color .15s,border-color .15s}
  .tourSkipHint:hover{color:var(--bone);border-color:var(--mute)}
  .tourMatchTeam.revealing{color:var(--mute)}
  .tourMatchTeam.locking{animation:tourLockPop .28s cubic-bezier(.34,1.56,.64,1) both,tourLockFlash .6s ease both}
  @keyframes tourLockPop{0%{transform:scale(.86)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
  @keyframes tourLockFlash{0%{background:var(--c);color:#101317}100%{background:var(--panel-2);color:var(--bone)}}
  @keyframes tourFadeIn{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .tourMatchTeam.locking{animation:tourFadeIn .2s ease both}
  }
  .tourRound{display:flex;flex-direction:column;justify-content:space-around;gap:12px;min-width:150px}
  .tourFinalCol{justify-content:center;min-width:170px}
  .tourFinalCol .tourMatch{border-color:var(--pick);box-shadow:0 0 0 1px var(--pick)}
  .tourRoundLabel{font:700 12px Tajawal;color:var(--mute);text-align:center;margin-bottom:4px}
  .tourMatch{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);
             border-radius:10px;padding:8px}
  .tourMatchTeam{font:700 12px Tajawal;padding:6px 8px;border-radius:6px;background:var(--panel-2);
                 border-inline-start:3px solid var(--c);color:var(--bone);overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
  .tourMatchTeam.winner{background:var(--c);color:#101317}

  .tourChampionBanner{text-align:center;padding:22px;border-radius:14px;background:var(--panel);
                      border:1px solid var(--pick)}
  .tourChampionKicker{font:600 12px Tajawal;color:var(--mute);letter-spacing:.04em;margin-bottom:6px}
  .tourChampionName{font:900 clamp(22px,2.8vw,34px) Tajawal;color:var(--c);
                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* DEV — REMOVE BEFORE RELEASE (win confetti) */
  .devConfetti{position:fixed;inset:0;z-index:800;pointer-events:none;display:block;width:100%;height:100%}
  /* /DEV */