/* #810 PANELS-ONLY luxury restyle. Keeps the marble world, gold knights, board and pieces exactly as they are.
   Restyles only the side panels, top bar, player bars, buttons and their writing. html[data-skin="p1|p2|p3"]. No navy. */

/* ---------- tokens ---------- */
/* P1 BLACK LACQUER: piano-black panels, gold-foil double rule, ivory serif */
html[data-skin="p1"]{
  --p-panel:linear-gradient(160deg,#211d16 0%,#0e0c09 55%,#070605 100%); --p-panel-flat:#0e0c09; --p-inset:#17140f; --p-deep:#050403;
  --p-rule:rgba(222,184,98,.7); --p-rule-2:rgba(222,184,98,.22); --p-line:rgba(222,184,98,.28);
  --p-ink:#f6eed8; --p-ink-2:#e7dcc0; --p-label:#d9b665; --p-muted:#c3b594;
  --p-on:linear-gradient(135deg,#9c7424 0%,#f6df99 45%,#c79a3c 70%,#8a661f 100%); --p-on-ink:#1a1204;
  --p-cta:linear-gradient(135deg,#9c7424 0%,#f6df99 45%,#c79a3c 70%,#8a661f 100%); --p-cta-ink:#1a1204;
  --p-clock:#050403; --p-clock-ink:#f1d98f; --p-run:linear-gradient(135deg,#9c7424,#f6df99 50%,#9c7424); --p-run-ink:#1a1204;
  --p-shadow:0 22px 48px -18px rgba(0,0,0,.65);
  --p-phone-bg:radial-gradient(ellipse 120% 70% at 50% 0%,#2a241a 0%,#0c0a07 60%,#050403 100%);
  --p-av-b:#050403; --p-av-b-ink:#f1d98f; --p-av-w:#f6eed8; --p-av-w-ink:#14110c;
}
/* P2 WHITE MARBLE GLASS: frosted ivory, gold-foil edge, black high-contrast serif */
html[data-skin="p2"]{
  --p-panel:linear-gradient(160deg,rgba(255,255,255,.94) 0%,rgba(250,246,237,.9) 100%); --p-panel-flat:#fbf8f1; --p-inset:rgba(241,234,220,.85); --p-deep:#14110c;
  --p-rule:#c49a3e; --p-rule-2:rgba(196,154,62,.35); --p-line:rgba(120,95,45,.28);
  --p-ink:#14110c; --p-ink-2:#2a241b; --p-label:#7a5a18; --p-muted:#4f4433;
  --p-on:#14110c; --p-on-ink:#f1d98f;
  --p-cta:#14110c; --p-cta-ink:#f1d98f;
  --p-clock:#14110c; --p-clock-ink:#f1d98f; --p-run:linear-gradient(135deg,#9c7424,#f6df99 50%,#9c7424); --p-run-ink:#1a1204;
  --p-shadow:0 22px 48px -20px rgba(60,45,15,.35);
  --p-phone-bg:radial-gradient(ellipse 120% 70% at 50% 0%,#ffffff 0%,#f1ebdf 55%,#e2d8c4 100%);
  --p-av-b:#14110c; --p-av-b-ink:#f1d98f; --p-av-w:#ffffff; --p-av-w-ink:#14110c;
}
/* P3 EMERALD + BRASS: deep emerald lacquer, antique brass double rule, cream serif */
html[data-skin="p3"]{
  --p-panel:linear-gradient(160deg,#145a45 0%,#0b3b2d 55%,#062319 100%); --p-panel-flat:#0b3b2d; --p-inset:#08301f; --p-deep:#04170f;
  --p-rule:rgba(214,176,98,.75); --p-rule-2:rgba(214,176,98,.25); --p-line:rgba(214,176,98,.3);
  --p-ink:#f6eed8; --p-ink-2:#e9e6d2; --p-label:#e0c07a; --p-muted:#cfd8c6;
  --p-on:#f6eed8; --p-on-ink:#0b3b2d;
  --p-cta:linear-gradient(180deg,#f0d38c 0%,#c9a24f 50%,#9a7631 100%); --p-cta-ink:#1d1406;
  --p-clock:#04170f; --p-clock-ink:#ecd08a; --p-run:linear-gradient(135deg,#8c6a2c,#ecd08a 50%,#8c6a2c); --p-run-ink:#1d1406;
  --p-shadow:0 22px 48px -18px rgba(0,20,12,.6);
  --p-phone-bg:radial-gradient(ellipse 120% 70% at 50% 0%,#15644b 0%,#0a3528 55%,#04170f 100%);
  --p-av-b:#04170f; --p-av-b-ink:#ecd08a; --p-av-w:#f6eed8; --p-av-w-ink:#0b3b2d;
}

/* ---------- surfaces: double gold rule = the luxury signature ---------- */
html[data-skin^="p"] body .topbar,
html[data-skin^="p"] body .turn-panel,
html[data-skin^="p"] body .gold-card,
html[data-skin^="p"] body .history-panel,
html[data-skin^="p"] body .dialog-inner,
html[data-skin^="p"] body .player-row,
html[data-skin^="p"] body .board-toolbar{
  background:var(--p-panel)!important;border:0!important;border-radius:6px!important;color:var(--p-ink)!important;backdrop-filter:blur(10px)!important;
  box-shadow:inset 0 0 0 1px var(--p-rule),inset 0 0 0 4px transparent,inset 0 0 0 5px var(--p-rule-2),var(--p-shadow)!important}
html[data-skin^="p"] body dialog{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-skin^="p"] body .turn-panel *,html[data-skin^="p"] body .history-panel *{border-color:var(--p-line)}

/* ---------- writing ---------- */
html[data-skin^="p"] body .topbar .brand,html[data-skin^="p"] body .topbar .brand span{color:var(--p-ink)!important;font-family:"Didot","Bodoni MT",Georgia,serif!important;letter-spacing:.08em}
html[data-skin^="p"] body .brand-sub{color:var(--p-label)!important;letter-spacing:.32em!important}
html[data-skin^="p"] body .beta-tag{background:transparent!important;color:var(--p-label)!important;border:1px solid var(--p-rule)!important;border-radius:2px!important;box-shadow:none!important;font-family:Georgia,serif!important;letter-spacing:.2em!important}
html[data-skin^="p"] body h1,html[data-skin^="p"] body h2,html[data-skin^="p"] body h3,html[data-skin^="p"] body #status,html[data-skin^="p"] body .player-row strong{color:var(--p-ink)!important;font-family:"Didot","Bodoni MT",Georgia,serif!important;letter-spacing:.01em}
html[data-skin^="p"] body .setup-panel::before{color:var(--p-ink)!important;font-family:"Didot","Bodoni MT",Georgia,serif!important;font-style:italic;font-weight:400!important;font-size:30px!important}
html[data-skin^="p"] body .eyebrow,html[data-skin^="p"] body .turn-panel label,html[data-skin^="p"] body .panel-heading span,html[data-skin^="p"] body #turn-number,html[data-skin^="p"] body .online-heading small,html[data-skin^="p"] body .history-labels,html[data-skin^="p"] body .player-side{color:var(--p-label)!important;font-family:Georgia,serif!important;letter-spacing:.24em!important;text-transform:uppercase}
html[data-skin^="p"] body .turn-panel p,html[data-skin^="p"] body .turn-panel small,html[data-skin^="p"] body .gold-card p,html[data-skin^="p"] body #status-detail,html[data-skin^="p"] body #board-hint,html[data-skin^="p"] body .empty-history,html[data-skin^="p"] body .player-row strong+span,html[data-skin^="p"] body dialog p,html[data-skin^="p"] body dialog li{color:var(--p-muted)!important}
html[data-skin^="p"] body .turn-panel strong,html[data-skin^="p"] body .turn-panel b,html[data-skin^="p"] body dialog strong,html[data-skin^="p"] body .history-list,html[data-skin^="p"] body .history-list *{color:var(--p-ink-2)!important}
html[data-skin^="p"] body .history-labels{background:var(--p-inset)!important}

/* ---------- buttons ---------- */
html[data-skin^="p"] body .quiet,html[data-skin^="p"] body #rules-top,html[data-skin^="p"] body #about-top{background:transparent!important;color:var(--p-ink)!important;border:1px solid var(--p-rule)!important;border-radius:2px!important;box-shadow:none!important;font-family:Georgia,serif!important;letter-spacing:.04em}
html[data-skin^="p"] body .theme-picker{background:var(--p-inset)!important;border:1px solid var(--p-line)!important;border-radius:2px!important;box-shadow:none!important}
html[data-skin^="p"] body .theme-picker button{color:var(--p-ink-2)!important;background:transparent!important;border-radius:2px!important;font-family:Georgia,serif!important}
html[data-skin^="p"] body .theme-picker button.active{background:var(--p-on)!important;color:var(--p-on-ink)!important}
html[data-skin^="p"] body .theme-picker button span{color:inherit!important;opacity:.7}
html[data-skin^="p"] body .mode-switch{background:var(--p-inset)!important;border:1px solid var(--p-line)!important;border-radius:3px!important;box-shadow:none!important;padding:4px!important}
html[data-skin^="p"] body .mode-switch button,html[data-skin^="p"] body .setting-options button{background:transparent!important;color:var(--p-ink)!important;border:1px solid var(--p-line)!important;border-radius:2px!important;box-shadow:none!important;font-family:Georgia,serif!important;font-weight:700!important}
html[data-skin^="p"] body .mode-switch button{border-color:transparent!important}
html[data-skin^="p"] body .mode-switch button.active,html[data-skin^="p"] body .setting-options button.active{background:var(--p-on)!important;color:var(--p-on-ink)!important;border-color:transparent!important;box-shadow:0 2px 10px -2px rgba(0,0,0,.35)!important}
html[data-skin^="p"] body .local-play-option,html[data-skin^="p"] body .guest-button,html[data-skin^="p"] body .secondary-button,html[data-skin^="p"] body .online-profile{background:transparent!important;color:var(--p-ink)!important;border:1px solid var(--p-line)!important;border-radius:2px!important;box-shadow:none!important;font-family:Georgia,serif!important}
html[data-skin^="p"] body .primary-button,html[data-skin^="p"] body #new-game,html[data-skin^="p"] body #online-search{background:var(--p-cta)!important;color:var(--p-cta-ink)!important;border:0!important;border-radius:2px!important;font-family:Georgia,serif!important;letter-spacing:.2em!important;text-transform:none!important;font-variant-caps:all-small-caps!important;font-size:1.15em;text-shadow:none!important;
  box-shadow:inset 0 0 0 1px rgba(255,240,200,.45),inset 0 0 0 4px transparent,inset 0 0 0 5px rgba(120,85,20,.35),0 10px 24px -10px rgba(0,0,0,.55)!important}
html[data-skin="p2"] body .primary-button,html[data-skin="p2"] body #new-game,html[data-skin="p2"] body #online-search{box-shadow:inset 0 0 0 4px #14110c,inset 0 0 0 5px #c49a3e,0 10px 24px -10px rgba(0,0,0,.45)!important}
html[data-skin^="p"] body .phantom-button{border-radius:2px!important;box-shadow:none!important}
html[data-skin^="p"] body .text-button,html[data-skin^="p"] body .lesson-link,html[data-skin^="p"] body .leaderboard-link{color:var(--p-label)!important;text-decoration-color:var(--p-rule)!important;background:transparent!important;font-family:Georgia,serif!important;font-style:italic}
html[data-skin^="p"] body .rewards-note{background:var(--p-inset)!important;border:1px solid var(--p-line)!important;border-left:3px solid var(--p-rule)!important;border-radius:2px!important;color:var(--p-muted)!important}
html[data-skin^="p"] body .turn-panel input{background:var(--p-inset)!important;color:var(--p-ink)!important;border:1px solid var(--p-line)!important;border-radius:2px!important}
html[data-skin^="p"] body .turn-dot{border-color:var(--p-rule)!important}
html[data-skin^="p"] body .live-label{background:var(--p-panel-flat)!important;color:var(--p-label)!important;border:1px solid var(--p-rule)!important;border-radius:2px!important;font-family:Georgia,serif!important}

/* ---------- player bars, clocks, avatars (crown centred by mask) ---------- */
html[data-skin^="p"] body .player-row:has(.chess-clock.running){box-shadow:inset 0 0 0 1px var(--p-rule),inset 0 0 0 4px transparent,inset 0 0 0 5px var(--p-rule),0 0 22px rgba(236,200,110,.35)!important}
html[data-skin^="p"] body .chess-clock{background:var(--p-clock)!important;color:var(--p-clock-ink)!important;border:1px solid var(--p-rule)!important;border-radius:2px!important;box-shadow:none!important;font-family:Georgia,serif!important;font-variant-numeric:tabular-nums}
html[data-skin^="p"] body .chess-clock.running{background:var(--p-run)!important;color:var(--p-run-ink)!important;border-color:transparent!important}
html[data-skin^="p"] body .player-row .avatar,html[data-skin^="p"] body.game-focus .player-row .avatar{position:relative!important;font-size:0!important;color:transparent!important;background-image:none!important;border-radius:3px!important;display:block!important;box-shadow:none!important}
html[data-skin^="p"] body .player-row .avatar.black,html[data-skin^="p"] body.game-focus .player-row .avatar.black{background-color:var(--p-av-b)!important;border:1px solid var(--p-rule)!important}
html[data-skin^="p"] body .player-row .avatar.white,html[data-skin^="p"] body.game-focus .player-row .avatar.white{background-color:var(--p-av-w)!important;border:1px solid var(--p-rule)!important}
html[data-skin^="p"] body .player-row .avatar::before{content:''!important;position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.75l4.6 3.6L12 4.75l4.4 6.6L21 7.75l-1.8 8.5H4.8z M5 17.75h14v1.5H5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.75l4.6 3.6L12 4.75l4.4 6.6L21 7.75l-1.8 8.5H4.8z M5 17.75h14v1.5H5z'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-skin^="p"] body .player-row .avatar.black::before{background:var(--p-av-b-ink)}
html[data-skin^="p"] body .player-row .avatar.white::before{background:var(--p-av-w-ink)}

/* ---------- toolbar + status ---------- */
html[data-skin^="p"] body .icon-button,html[data-skin^="p"] body.game-focus .board-toolbar .icon-button{background:var(--p-panel-flat)!important;color:var(--p-ink)!important;border:1px solid var(--p-rule-2)!important;border-radius:3px!important;box-shadow:inset 0 0 0 1px var(--p-line)!important;opacity:1}
html[data-skin^="p"] body .icon-button.on,html[data-skin^="p"] body.game-focus .board-toolbar .icon-button.on{background:var(--p-on)!important;color:var(--p-on-ink)!important;border-color:transparent!important}
html[data-skin^="p"] body.game-focus .board-toolbar .icon-button:disabled{opacity:.45}
html[data-skin^="p"] body .icon-button svg path{stroke:currentColor!important}
html[data-skin^="p"] body.game-focus .board-toolbar{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
html[data-skin^="p"] body.game-focus .status-panel{background:var(--p-panel)!important;border:0!important;border-radius:3px!important;box-shadow:inset 0 0 0 1px var(--p-rule)!important}
html[data-skin^="p"] body.game-focus .status-panel #status{color:var(--p-ink)!important}

/* phone: game + setup backgrounds were navy -> the chosen material; board/pieces untouched */
html[data-skin^="p"] body.game-focus,html[data-skin^="p"] body.phone-setup{background:var(--p-phone-bg)!important}
html[data-skin^="p"] body.game-focus .world{display:none!important}
@media (max-width:600px){
  html[data-skin^="p"] body .topbar{flex-wrap:wrap!important;height:auto!important;row-gap:10px!important}
  html[data-skin^="p"] body .brand{order:1!important}
  html[data-skin^="p"] body .header-right{order:2!important;display:flex!important;gap:8px!important;width:100%!important;margin:0!important;flex-wrap:wrap!important}
  html[data-skin^="p"] body .header-right>*{flex:1 1 0!important;justify-content:center!important;text-align:center!important}
  html[data-skin^="p"] body .header-right .theme-picker{flex:1 1 100%!important;display:flex!important}
  html[data-skin^="p"] body .header-right .theme-picker button{flex:1 1 0!important}
}

/* ---------- owner panel: same material ---------- */
html[data-skin^="p"] body .auth-card,html[data-skin^="p"] body .summary article,html[data-skin^="p"] body .panel,html[data-skin^="p"] body .game-row{background:var(--p-panel)!important;border:0!important;border-radius:6px!important;color:var(--p-ink)!important;box-shadow:inset 0 0 0 1px var(--p-rule),inset 0 0 0 4px transparent,inset 0 0 0 5px var(--p-rule-2),var(--p-shadow)!important}
html[data-skin^="p"] body .auth-card h1,html[data-skin^="p"] body .summary article strong,html[data-skin^="p"] body .panel h2{color:var(--p-ink)!important;font-family:"Didot","Bodoni MT",Georgia,serif!important}
html[data-skin^="p"] body .summary article span,html[data-skin^="p"] body .panel small,html[data-skin^="p"] body .auth-card p{color:var(--p-muted)!important}
html[data-skin^="p"] body .range button.active,html[data-skin^="p"] body .auth-card button[type=submit]{background:var(--p-cta)!important;color:var(--p-cta-ink)!important;border:0!important;border-radius:2px!important}
html[data-skin^="p"] body .range button,html[data-skin^="p"] body .secondary{border-radius:2px!important;border-color:var(--p-rule)!important;color:var(--p-ink)!important;background:transparent!important}
html[data-skin^="p"] body .map-dot{fill:#f1d98f!important}
html[data-skin^="p"] body .live-counts,html[data-skin^="p"] body .connection-dot,html[data-skin^="p"] body .login-note{color:var(--p-muted)!important}
html[data-skin^="p"] body .rewards-note b{color:var(--p-ink)!important}
/* owner page ground (owner.css vars were navy) */
html[data-skin="p1"]{--navy:#0c0a07;--navy2:#17140f;--panel:#17140f;--line:rgba(222,184,98,.3);--gold:#e0bf6e;--cream:#f6eed8;--muted:#c3b594}
html[data-skin="p2"]{--navy:#efe9dc;--navy2:#fbf8f1;--panel:#fbf8f1;--line:rgba(120,95,45,.28);--gold:#7a5a18;--cream:#14110c;--muted:#4f4433}
html[data-skin="p3"]{--navy:#06291f;--navy2:#0b3b2d;--panel:#0b3b2d;--line:rgba(214,176,98,.3);--gold:#e0c07a;--cream:#f6eed8;--muted:#cfd8c6}
html[data-skin^="p"] body:has(.auth-card){background:var(--p-phone-bg)!important}
html[data-skin^="p"] body:has(.auth-card) .topbar{background:var(--p-panel)!important}
html[data-skin^="p"] body:has(.auth-card) .map-wrap svg{background:var(--p-inset)!important}
html[data-skin^="p"] body:has(.auth-card) .land path{fill:var(--p-line)!important}
html[data-skin^="p"] body .range{background:var(--p-inset)!important;border:1px solid var(--p-line)!important;border-radius:3px!important}
html[data-skin^="p"] body .range button:not(.active){color:var(--p-ink)!important;border-color:transparent!important}
html[data-skin^="p"] body .pill{color:var(--p-ink)!important;border-color:var(--p-rule)!important;background:transparent!important}

/* ---------- simple start (#790): Computer / Multiplayer / Connect wallet only ---------- */
body.simple-start #local-mode,
body.simple-start .rated-choice,
body.simple-start #ladder-join,
body.simple-start #online-panel .online-times,
body.simple-start #online-match-type,
body.simple-start:not(.wallet-entry) #login-choice,
body.simple-start.wallet-entry #login-guest,
body.simple-start.wallet-entry #online-guest-field{display:none!important}
body.simple-start #online-panel .ladder-box{margin-top:4px}
body.simple-start #online-panel .online-ranked-note{padding:6px 10px;border-left:3px solid #e6c46a;border-radius:0 8px 8px 0;background:rgba(230,196,106,.09);font-size:12px;line-height:1.45}
body.simple-start #online-panel .ladder-recover-entry{min-height:40px;padding:5px 2px;text-align:left;font-size:12px;text-decoration:underline;text-underline-offset:3px}
body.simple-start #online-panel #ladder-error:empty{display:none!important}
body.simple-start .mode-switch{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important}
body.simple-start .mode-switch button{min-width:0!important;white-space:nowrap;padding-left:4px!important;padding-right:4px!important;font-size:clamp(13px,3.9vw,16px)!important;letter-spacing:0!important}
html[data-skin] body.simple-start .turn-panel .mode-switch button{font-size:clamp(13px,3.8vw,16px)!important;letter-spacing:0!important;padding-left:3px!important;padding-right:3px!important}
html[data-skin^="p"] body .turn-panel label small,html[data-skin^="p"] body .turn-panel label span+small{font-family:"Segoe UI",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--p-muted)!important;font-size:14px!important}
html[data-skin] body.simple-start .turn-panel .mode-switch button{white-space:normal!important;line-height:1.12!important;overflow-wrap:normal}

/* ---------- About page (how-it-works.css) in black lacquer; its board squares keep their own colours ---------- */
html[data-skin="p1"]{--bg:#0b0a08;--bg-deep:#050403;--bg-alt:#12100c;--surface:#17140f;--surface-2:#211d16;--line:rgba(222,184,98,.16);--line-strong:rgba(222,184,98,.45);--ink:#f6eed8;--ink-soft:#e7dcc0;--muted:#c3b594}
html[data-skin="p1"] body:has(.site-header){background:radial-gradient(ellipse 90% 60% at 50% 0%,#2a241a 0%,#0b0a08 60%,#050403 100%) fixed!important}
html[data-skin="p1"] body .site-header{background:rgba(11,10,8,.88)!important;border-bottom:1px solid rgba(222,184,98,.35)!important}
html[data-skin="p1"] body .cta-inner{background:radial-gradient(520px 300px at 50% -4%,rgba(240,190,80,.24),rgba(240,190,80,.05) 55%,transparent 72%),linear-gradient(170deg,#211d16,#0b0a08)!important}
html[data-skin="p1"] body:has(.site-header) h1,html[data-skin="p1"] body:has(.site-header) h2,html[data-skin="p1"] body:has(.site-header) h3{font-family:"Didot","Bodoni MT",Georgia,serif!important}
html[data-skin="p1"] body:has(.site-header) :is(.equation,article.rule,article.way,.key-note,li.stat,.ladder-card,.tn-stat,.tn-stage,.tn-flow li,li.safe,.tokenomics,.faq-item,details){background:linear-gradient(160deg,#211d16 0%,#0e0c09 70%)!important;border-color:rgba(222,184,98,.3)!important}
html[data-skin="p1"] body:has(.site-header) .tn-flow li span{background:linear-gradient(135deg,#9c7424,#f6df99 50%,#9c7424)!important;color:#1a1204!important}
html[data-skin^="p"] body #review-nav button,html[data-skin^="p"] body .toast{background:var(--p-panel-flat)!important;color:var(--p-ink)!important;border:1px solid var(--p-rule-2)!important}
html[data-skin^="p"] body footer{border-color:var(--p-line)!important;color:var(--p-muted)!important}
html[data-skin^="p"] body footer :is(button,a){color:var(--p-ink)!important}
html[data-skin^="p"] body .turn-dot{background:var(--p-ink)!important}
html[data-skin^="p"] body:has(.auth-card) :is(input#owner-key,.tooltip,.privacy-note){background:var(--p-inset)!important;border:1px solid var(--p-line)!important;color:var(--p-ink)!important}
@media (min-width:601px){
  html[data-skin] body.simple-start .turn-panel .mode-switch{grid-template-columns:1fr 1fr!important}
  html[data-skin] body.simple-start .turn-panel .mode-switch button{font-size:15px!important;white-space:nowrap!important}
}
/* phone header: two nav buttons share row 1, theme picker row 2 (keeps Start on screen at 320px) */
@media (max-width:600px){
  html[data-skin^="p"] body .header-right .theme-picker{order:3!important}
  html[data-skin^="p"] body .header-right>:is(#rules-top,#about-top){min-height:38px!important;padding-top:4px!important;padding-bottom:4px!important}
  html[data-skin^="p"] body .header-right .theme-picker button{min-height:36px!important;padding-top:2px!important;padding-bottom:2px!important}
  html[data-skin^="p"] body .topbar{padding-top:10px!important;padding-bottom:10px!important}
}
@media (max-width:600px){
  html[data-skin^="p"] body .header-right>#rules-top{order:1!important}
  html[data-skin^="p"] body .header-right>#about-top{order:2!important}
  html[data-skin^="p"] body .header-right>.theme-picker{order:3!important}
}
/* very small phones (320-360 wide): tighter card so Start stays on the first screen */
@media (max-width:360px){
  html[data-skin^="p"] body.phone-setup .setup-panel::before{font-size:24px!important;line-height:1.1!important}
  html[data-skin^="p"] body.phone-setup .setup-panel{gap:6px!important;padding:12px!important}
  html[data-skin^="p"] body.phone-setup main{padding-top:10px!important}
  html[data-skin^="p"] body .topbar{row-gap:6px!important}
}
/* owner Watch panel: move history + game rows in the same black lacquer (was navy) */
html[data-skin^="p"] body :is(.watch-history,.game-row,.player-row-owner,.players-list li){background:var(--p-inset)!important;border:1px solid var(--p-line)!important;color:var(--p-ink)!important}

/* Wallet sign-in is a separate action from choosing a game mode. */
html[data-skin^="p"] body.simple-start #wallet-mode {
  display:flex!important; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:44px; margin:10px 0 0; padding:10px 14px;
  background:linear-gradient(135deg,#f0c7ed,#cfb3f1)!important;
  color:#30203e!important; border:1px solid #b987cf!important;
  border-radius:10px!important; box-shadow:0 3px 0 #78499138!important;
  font:700 15px/1.2 'Segoe UI',sans-serif!important; letter-spacing:0!important;
}
html[data-skin^="p"] body.simple-start #wallet-mode:hover { background:#f4d8f5!important; }
html[data-skin^="p"] body.simple-start #wallet-mode.active {
  border-color:#633880!important; box-shadow:inset 0 0 0 2px #633880,0 3px 0 #78499138!important;
}
html[data-skin^="p"] body.simple-start #wallet-mode:focus-visible { outline:3px solid #8554b4; outline-offset:3px; }
html[data-skin^="p"] body.simple-start #wallet-mode svg {
  width:22px; height:22px; flex:0 0 22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}