/* Cross My Heart — web build styles. Parchment / ink / gold, Arena-mapped layout. */
:root{
  --ink:#1d1508; --ink2:#3a2c14; --parch:#f6f1e7; --parch2:#efe5cf;
  --gold:#c9a227; --gold2:#e8c877; --red:#a02c22; --teal:#1f5f5b;
  --cardw:118px; --cardh:164px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:#0d1420;min-height:100vh}
body[data-theme="dawn"] #screen-home, body[data-theme="dawn"] .screen:not(#screen-match){background:#0d1420 url('assets/bg-dawn-harbour.webp') center/cover fixed}
body[data-theme="storm"] #screen-home, body[data-theme="storm"] .screen:not(#screen-match){background:#0d1420 url('assets/bg-storm-harbour.webp') center/cover fixed}
button{font-family:inherit}
.hidden{display:none !important}

/* ---------- screens & panels ---------- */
.screen{display:none;min-height:100vh;padding:14px}
.screen.active{display:block}
#screen-loading{display:none;align-items:center;justify-content:center;text-align:center}
#screen-loading.active{display:flex}
.loading-bg{position:fixed;inset:0;background:#0d1420 url('assets/bg-dawn-harbour.webp') center/cover;opacity:.85}
.loading-card{position:relative;background:rgba(246,241,231,.94);border:2px solid var(--gold);border-radius:14px;padding:28px 30px;max-width:560px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.game-title{font-size:42px;margin:0 0 4px;letter-spacing:1px;color:var(--ink)}
.game-title.small{font-size:30px}
.game-sub{font-style:italic;color:var(--ink2);margin:0 0 16px}
.tidbit-box{border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:12px 6px;min-height:96px}
.tidbit-title{font-variant:small-caps;letter-spacing:2px;color:var(--red);font-weight:bold}
.tidbit-text{font-style:italic;line-height:1.45;margin:6px 0 0}
.loading-note{color:var(--ink2);font-size:13px}
.panel{background:rgba(246,241,231,.97);border:2px solid var(--gold);border-radius:12px;padding:18px;max-width:640px;margin:24px auto;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wide-panel{max-width:1060px}
.panel h2,.panel h3{margin-top:0}
.fine{font-size:14px;line-height:1.45;color:var(--ink2)}
.fine.dim{opacity:.75;font-size:12.5px}
.fld{display:block;margin:10px 0;font-size:14px}
.fld input,.fld select{width:100%;padding:9px;border:1px solid var(--ink2);border-radius:6px;background:#fff;font-size:15px;margin-top:4px}
.or-row{text-align:center;border-top:1px solid #cbbf9f;margin:16px 0 4px;position:relative}
.or-row span{background:var(--parch);padding:0 10px;position:relative;top:-10px;font-style:italic;color:var(--ink2)}

/* ---------- buttons ---------- */
.btn{background:var(--parch2);border:1.5px solid var(--ink2);color:var(--ink);border-radius:8px;padding:8px 16px;font-size:15px;cursor:pointer;transition:transform .08s, box-shadow .15s}
.btn:hover{box-shadow:0 2px 10px rgba(0,0,0,.25)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:#7a5f10;font-weight:bold}
.btn.ghost{background:transparent;border-color:rgba(120,100,50,.5)}
.btn.small{padding:4px 10px;font-size:13px}
.btn.big{padding:12px 22px;font-size:17px}
.btn.wide{width:100%;margin:6px 0}
.btn.danger{background:#f3d9d4;border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.badge{background:var(--red);color:#fff;border-radius:10px;padding:0 7px;font-size:12px}

/* ---------- topbar / home ---------- */
.topbar{display:flex;align-items:center;gap:14px;background:rgba(13,20,32,.82);color:var(--parch);padding:10px 14px;border-radius:10px;max-width:1060px;margin:0 auto 14px}
.topbar h3{margin:0;flex:0 0 auto}
.topbar .btn.ghost{color:var(--parch);border-color:rgba(246,241,231,.4)}
.brand{font-variant:small-caps;letter-spacing:1px;font-size:18px}
.wallet{margin-left:auto;font-size:14px;display:flex;gap:12px;flex-wrap:wrap}
.wallet b{color:var(--gold2)}
.home-hero{max-width:860px;margin:30px auto;background:rgba(246,241,231,.94);border:2px solid var(--gold);border-radius:14px;padding:26px;text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.home-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:16px 0 22px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{background:#fff;border:1.5px solid var(--ink2);border-radius:10px;padding:16px 8px;font-size:26px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center}
.tile span{font-size:15px}
.tile small{font-size:11.5px;color:var(--ink2)}
.tile:hover{border-color:var(--gold);box-shadow:0 3px 12px rgba(0,0,0,.2)}

/* ---------- cards ---------- */
.mini-card{position:relative;width:var(--cardw);min-height:var(--cardh);background:linear-gradient(180deg,#fdfaf2,#f3ead2);border:2px solid var(--ink2);border-radius:9px;padding:5px;font-size:11px;display:flex;flex-direction:column;cursor:pointer;flex:0 0 auto;transition:transform .15s, box-shadow .15s;user-select:none}
.mini-card .art{height:62px;border-radius:5px;background-size:cover;background-position:center;border:1px solid rgba(60,44,20,.4);margin-bottom:4px}
.mini-card .cname{font-weight:bold;font-size:11.5px;line-height:1.15}
.mini-card .ctype{font-variant:small-caps;font-size:9.5px;color:var(--ink2);letter-spacing:.4px}
.mini-card .ctext{font-size:9.8px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.mini-card .crow{display:flex;justify-content:space-between;align-items:center}
.mini-card .cost{background:var(--gold2);border:1px solid #7a5f10;border-radius:50%;width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;font-weight:bold;font-size:11px}
.mini-card .pow{background:var(--ink);color:var(--gold2);border-radius:5px;padding:1px 6px;font-weight:bold}
.mini-card .mark{font-size:10px}
.mini-card .rar{font-size:9px;font-variant:small-caps}
.rar-Common{color:#5c5342}.rar-Uncommon{color:#2c6e49}.rar-Rare{color:#2456a6}.rar-Mythic{color:var(--red)}
.mini-card.rested{transform:rotate(7deg);opacity:.62}
.mini-card.host-attached{outline:2px dashed var(--teal);outline-offset:-5px}
.mini-card .attached-tag{position:absolute;bottom:4px;right:4px;background:var(--teal);color:#fff;border-radius:4px;font-size:9px;padding:1px 4px}
.mini-card.legal{box-shadow:0 0 0 2px var(--gold),0 0 16px 4px rgba(232,200,119,.75);animation:glowpulse 1.6s ease-in-out infinite}
.mini-card.selected{box-shadow:0 0 0 3px var(--red),0 0 18px rgba(160,44,34,.5)}
.mini-card.targetable{box-shadow:0 0 0 2px var(--red)}
.mini-card.fresh{animation:deployin .45s ease-out}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 2px var(--gold),0 0 10px 2px rgba(232,200,119,.55)}50%{box-shadow:0 0 0 2px var(--gold),0 0 20px 7px rgba(232,200,119,.9)}}
@keyframes deployin{from{transform:translateY(-26px) scale(1.12);opacity:0}to{transform:none;opacity:1}}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px;margin-top:10px}
.card-grid .mini-card{width:100%}
.count-chip{position:absolute;top:4px;right:4px;background:var(--ink);color:var(--gold2);border-radius:9px;font-size:10.5px;padding:1px 6px;font-weight:bold}

/* ---------- match table ---------- */
#screen-match{padding:0}
#table{position:relative;min-height:100vh;padding:10px 12px 8px;background:#20362e url('assets/table-timber.webp') center/cover}
body[data-mat="long-table"] #table{background-image:url('assets/mat-long-table.webp')}
body[data-mat="star-roads"] #table{background-image:url('assets/mat-star-roads.webp')}
.match-top{display:flex;align-items:center;gap:12px;max-width:1180px;margin:0 auto}
.phase-ladder{display:flex;gap:5px}
.phase-ladder .ph{background:rgba(13,20,32,.72);color:#b9ac8d;border:1px solid rgba(232,200,119,.35);border-radius:14px;padding:3px 11px;font-size:12.5px;font-variant:small-caps;letter-spacing:1px}
.phase-ladder .ph.now{background:var(--gold);color:var(--ink);font-weight:bold;box-shadow:0 0 12px rgba(232,200,119,.8)}
.phase-ladder .ph.done{opacity:.45}
/* Whose turn it is, stated on the progress bar itself (Jace, Nov 4, 2026). */
.phase-ladder .ph.owner{font-variant:normal;font-weight:800;letter-spacing:1.2px;border-width:1.5px}
.phase-ladder .ph.owner.mine{background:#2f9e5f;color:#fff;border-color:#57c785;box-shadow:0 0 10px rgba(70,200,120,.55)}
.phase-ladder .ph.owner.foe{background:#a33338;color:#fff;border-color:#d77a7e;box-shadow:0 0 10px rgba(220,80,80,.5)}
.phase-ladder .ph.owner.setup{background:rgba(13,20,32,.72);color:#b9ac8d}
.phase-ladder.foe .ph.now{background:#a33338;color:#fff;border-color:#d77a7e;box-shadow:0 0 12px rgba(220,80,80,.65)}
.turn-banner{color:var(--parch);font-style:italic;font-size:14.5px;text-shadow:0 1px 3px #000}
#btn-gear{margin-left:auto;color:var(--parch);border-color:rgba(246,241,231,.4)}
.board{max-width:1180px;margin:6px auto;background:rgba(246,241,231,.13);border:1px solid rgba(232,200,119,.30);border-radius:12px;padding:8px 10px;backdrop-filter:blur(1.5px)}
.player-strip{display:flex;align-items:center;gap:12px;color:var(--parch)}
.portrait{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a4632,#241a0c);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--gold2)}
.pname{font-variant:small-caps;letter-spacing:1px;font-size:15px}
.hearts{font-size:15px}
.hearts .hnum{font-weight:bold;font-size:19px;color:#ffb3a6}
.hearts .hnum.bump{animation:hbump .5s}
@keyframes hbump{30%{transform:scale(1.45);color:#fff}}
.pile-info{margin-left:auto;display:flex;gap:8px}
.pile{background:rgba(13,20,32,.72);color:var(--parch);border:1px solid rgba(232,200,119,.4);border-radius:8px;padding:4px 10px;font-size:11.5px;cursor:pointer;text-align:center}
.pile.static{cursor:default}
.field-row{display:flex;gap:9px;min-height:172px;align-items:flex-start;padding:6px 2px;overflow-x:auto}
.berth-row{display:flex;gap:9px;min-height:0;padding:2px}
.berth-row .mini-card{--cardw:96px;--cardh:132px;width:96px;min-height:132px;opacity:.92}
.berth-label{color:var(--parch);font-size:12px;font-style:italic;align-self:center}
.energy-row{display:flex;gap:7px;min-height:54px;align-items:center;padding:2px}
/* Energy is a card set face down; spent Energy turns sideways (Jace, Nov 4, 2026). */
.energy-card{width:34px;height:48px;flex:0 0 auto;margin:0 2px;transition:transform .25s}
.energy-card .ec-back{width:100%;height:100%;border-radius:5px;background:linear-gradient(160deg,#31435f,#101a2c);border:1.5px solid var(--gold);color:var(--gold2);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.energy-card.rested{transform:rotate(90deg) scale(.86);opacity:.55}
.hand .mini-card.cant-afford{filter:grayscale(.5) brightness(.68)}
.midline{max-width:1180px;margin:2px auto;display:flex;justify-content:flex-end}
.resolution-rail{width:300px;max-width:44vw;max-height:104px;overflow-y:auto;background:rgba(13,20,32,.66);border:1px solid rgba(232,200,119,.30);border-radius:8px;color:#e9e0c8;font-size:12px;padding:6px 9px}
.resolution-rail div{padding:1.5px 0;border-bottom:1px dotted rgba(232,200,119,.18)}
.resolution-rail div:last-child{border-bottom:none}
#arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hand-zone{max-width:1180px;margin:4px auto 0;display:flex;align-items:flex-end;gap:14px}
.hand{display:flex;gap:6px;flex:1;justify-content:center;min-height:150px;align-items:flex-end;padding-top:16px}
.hand .mini-card{margin-left:-26px;transform-origin:bottom center}
.hand .mini-card:first-child{margin-left:0}
.hand .mini-card:hover{transform:translateY(-30px) scale(1.14);z-index:5;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.action-dock{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:190px}
.hint{color:var(--parch);font-size:13px;font-style:italic;text-shadow:0 1px 3px #000;min-height:32px}
.float-delta{position:absolute;font-weight:bold;font-size:21px;color:#ffb3a6;text-shadow:0 1px 4px #000;animation:floatup 1.15s ease-out forwards;pointer-events:none;z-index:40}
.float-delta.gain{color:#b7f0b0}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-44px);opacity:0}}

/* ---------- chat ---------- */
#chat-toggle{position:fixed;left:14px;bottom:14px;z-index:30;color:var(--parch);border-color:rgba(246,241,231,.45);background:rgba(13,20,32,.8)}
#chat-panel{position:fixed;left:14px;bottom:56px;width:330px;max-width:92vw;background:rgba(246,241,231,.98);border:2px solid var(--gold);border-radius:10px;z-index:31;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.chat-head{display:flex;justify-content:space-between;align-items:center;font-variant:small-caps;letter-spacing:1px}
#chat-log{height:180px;overflow-y:auto;font-size:13.5px;padding:6px 2px}
#chat-log .msg{margin:3px 0}
#chat-log .who{font-weight:bold}
#chat-log .sys{font-style:italic;color:var(--ink2)}
#chat-form{display:flex;gap:6px}
#chat-form input{flex:1;padding:7px;border:1px solid var(--ink2);border-radius:6px}

/* ---------- overlays & modals ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,10,18,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:14px}
.modal-card{background:var(--parch);border:2px solid var(--gold);border-radius:12px;padding:20px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.modal-card.wide{max-width:860px}
.modal-card h3{margin-top:0}
#modal-body{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
#modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.mark-wheel{display:flex;gap:10px}
.mark-btn{width:64px;height:64px;border-radius:50%;font-size:27px;border:2.5px solid var(--ink2);background:#fff;cursor:pointer}
.mark-btn.sel{border-color:var(--gold);background:var(--gold2);box-shadow:0 0 14px rgba(232,200,119,.9)}
.inspect-card{transform:none;display:flex;justify-content:center;max-width:94vw}
.inspect-card .mini-card{width:210px;min-height:294px}
.inspect-card .mini-card.face-card{width:auto;height:min(86dvh,540px);aspect-ratio:5/7;min-height:0}
.overlay-close{position:absolute;top:16px;right:16px;color:var(--parch);border-color:rgba(246,241,231,.5)}

/* ---------- flip theatre ---------- */
#flip-theatre{background:rgba(8,10,18,.88);z-index:60}
.flip-stage{perspective:1100px;text-align:center}
.flip-inner{width:230px;height:320px;margin:0 auto;position:relative;transform-style:preserve-3d}
.flip-inner.spin{animation:flipspin 1.25s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes flipspin{from{transform:rotateY(0)}to{transform:rotateY(1800deg)}}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center}
.flip-back{background:linear-gradient(160deg,#31435f,#101a2c);border:3px solid var(--gold);color:var(--gold2);font-size:64px}
.flip-front{transform:rotateY(180deg)}
.flip-front .mini-card{width:230px;min-height:320px;font-size:14px}
.flip-front .mini-card .art{height:130px}
.flip-front .mini-card .ctext{font-size:12.5px;-webkit-line-clamp:8}
.flip-verdict{margin-top:18px;font-size:30px;font-variant:small-caps;letter-spacing:3px;color:var(--gold2);min-height:40px;text-shadow:0 2px 8px #000}
.flip-caption{margin-bottom:16px;font-size:16.5px;color:var(--parch);text-align:center;max-width:520px;text-shadow:0 2px 8px #000;line-height:1.45}
.flip-verdict.miss{color:#b9ac8d}

/* ---------- builder / shop / cosmetics ---------- */
.builder-wrap{display:grid;grid-template-columns:1fr 380px;gap:14px;max-width:1180px;margin:0 auto}
.builder-left,.builder-right{margin:0}
.deck-stats{font-size:13.5px;background:#fff;border:1px solid #cbbf9f;border-radius:8px;padding:9px;margin:8px 0;line-height:1.5}
.deck-list{font-size:13.5px;max-height:220px;overflow-y:auto}
.deck-list .row{display:flex;justify-content:space-between;padding:2.5px 0;border-bottom:1px dotted #cbbf9f}
.suggestions{font-size:13.5px}
.sugg{background:#fff;border:1px solid #cbbf9f;border-left:4px solid var(--gold);border-radius:6px;padding:7px 9px;margin:6px 0}
.sugg .why{color:var(--ink2);font-style:italic}
.filterbar{display:flex;gap:6px;flex-wrap:wrap}
.filterbar .btn.sel{background:var(--gold2);border-color:#7a5f10;font-weight:bold}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:12px}
.shop-item{background:#fff;border:1.5px solid var(--ink2);border-radius:10px;padding:14px;text-align:center}
.shop-item .ico{font-size:34px}
.cosmetic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:10px 0 18px}
.cosmetic-item{border:1.5px solid var(--ink2);border-radius:10px;overflow:hidden;background:#fff;text-align:center}
.cosmetic-item img{width:100%;height:96px;object-fit:cover;display:block}
.cosmetic-item .meta{padding:8px;font-size:13.5px}
.cosmetic-item.equipped{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.pack-results{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.starter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.starter-item{background:#fff;border:1.5px solid var(--ink2);border-radius:10px;padding:12px;text-align:center}
.starter-item img{width:100%;height:110px;object-fit:cover;border-radius:6px}
.friend-row,.invite-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #cbbf9f;border-radius:8px;padding:8px 11px;margin:6px 0;font-size:14.5px}
.presence{width:10px;height:10px;border-radius:50%;background:#bbb;flex:0 0 auto}
.presence.on{background:#2c9e4f;box-shadow:0 0 6px #2c9e4f}
.friend-add{display:flex;gap:8px;margin:10px 0}
.friend-add input{flex:1;padding:9px;border:1px solid var(--ink2);border-radius:6px;font-size:15px}
.result-card{text-align:center}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--gold2);padding:10px 20px;border-radius:20px;font-size:14.5px;z-index:80;transition:transform .3s;max-width:92vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--cardw:88px;--cardh:126px}
  .mini-card .art{height:44px}
  .mini-card .ctext{-webkit-line-clamp:4;font-size:9px}
  .builder-wrap{grid-template-columns:1fr}
  .hand .mini-card{margin-left:-38px}
  .hand .mini-card:hover{transform:translateY(-18px) scale(1.08)}
  .resolution-rail{display:none}
  .action-dock{min-width:140px}
  .btn.big{padding:10px 14px;font-size:15px}
  .game-title{font-size:32px}
  .phase-ladder .ph{padding:2px 7px;font-size:11px}
}

.coach{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:60;
 background:var(--parch,#f3e9d2);color:#2a2320;border:2px solid #8a6d3b;border-radius:12px;
 padding:12px 16px;max-width:520px;width:calc(100% - 32px);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.coach.hidden{display:none}
.coach-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:4px}
.coach p{margin:4px 0 10px;line-height:1.45}
.tutorial-badge{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:55;
 background:#20405c;color:#eaf2f8;padding:4px 12px;border-radius:999px;font-size:13px}
.tutorial-badge.hidden{display:none}
.bot-setup{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.bot-setup label{display:flex;flex-direction:column;gap:4px;font-size:13px;text-align:left}

/* ---------- real card faces (Jace's ruling, Nov 4, 2026) ---------- */
.mini-card.face-card{height:var(--cardh);padding:0;border:none;background:none;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.mini-card.face-card .face-img{width:100%;height:100%;object-fit:cover;display:block}
.mini-card.face-card.legal{box-shadow:0 0 0 2px var(--gold),0 0 16px 4px rgba(232,200,119,.75)}
.mini-card.face-card.selected{box-shadow:0 0 0 3px var(--red),0 0 18px rgba(160,44,34,.5)}
.pow-badge{position:absolute;top:4px;right:4px;background:var(--ink);color:var(--gold2);border:1.5px solid var(--gold);border-radius:6px;padding:1px 7px;font-weight:bold;font-size:13px;z-index:3}

.flip-front .mini-card.face-card{width:230px;height:322px;min-height:322px}

/* ---------- landscape app frame (Jace's ruling, Nov 4, 2026) ---------- */
html,body{height:100%}
body{overflow:hidden}
#app{height:100dvh}
.screen{height:100dvh;min-height:0;overflow:hidden}
.panel{max-height:calc(100dvh - 30px);overflow-y:auto}
#table{display:flex;flex-direction:column;height:100dvh;min-height:0;gap:4px}
#table .board{width:100%;margin:0 auto;flex:0 1 auto;min-height:0}
.hand-zone{flex:0 0 auto}
#btn-view-toggle{color:var(--parch);border-color:rgba(246,241,231,.4)}
/* Your table fills the screen; the enemy board rides as a slim status strip until opened. */
#table.view-mine .opp-board .energy-row,#table.view-mine .opp-board .field-row,#table.view-mine .opp-board .berth-row{display:none}
#table.view-opp .my-board,#table.view-opp .midline{display:none}
#table.view-opp .hand{display:none}
#table.view-opp .hand-zone{justify-content:flex-end;height:auto;min-height:0}
.field-row{overflow:hidden;min-height:0;height:calc(var(--cardh) + 10px)}
.berth-row{overflow:hidden}
.hand{min-height:0;height:calc(var(--cardh) + 6px);padding-top:6px}
.midline .resolution-rail{max-height:58px}
#rotate-prompt{display:none}
@media (orientation:portrait){
  #screen-match.active #rotate-prompt{display:flex;position:fixed;inset:0;z-index:65;background:rgba(8,12,20,.93);color:var(--parch);align-items:center;justify-content:center;text-align:center;font-size:19px;padding:24px}
}
@media (orientation:landscape) and (max-height:560px){
  :root{--cardw:clamp(50px,11.5vh,104px);--cardh:calc(var(--cardw)*1.4);--berthw:calc(var(--cardw)*0.78);--berthh:calc(var(--cardh)*0.78)}
  .midline{display:none}
  .hand .mini-card{margin-left:-30px}
  .board{padding:4px 8px}
  .energy-row{min-height:38px}
  .portrait{width:34px;height:34px;font-size:16px}
  .player-strip{gap:8px}
  .energy-row{min-height:40px}
  .energy-card{width:26px;height:37px}
  .energy-card .ec-back{font-size:12px}
  .berth-row .mini-card{--cardw:var(--berthw);--cardh:var(--berthh);width:var(--berthw);min-height:var(--berthh)}
  .phase-ladder .ph{padding:2px 8px;font-size:11px}
  .turn-banner{font-size:12.5px}
  .hint{font-size:12px;min-height:24px}
  .btn.big{padding:8px 14px;font-size:14.5px}
  .home-hero{margin:4px auto;padding:12px 16px}
  .panel{margin:6px auto;padding:12px}
  .coach{bottom:10px}
}