@layer base, layout, components, motion, responsive;
@layer base {
  :root { color-scheme: dark; --ink:#eee3d1; --muted:#b6a897; --gold:#d1ae73; --line:#c2a06b35; --surface:#20191e; --red:#dc8580; --serif:'Noto Serif CJK SC','Source Han Serif SC','Songti SC',SimSun,Georgia,serif; --sans:Inter,'Noto Sans CJK SC','Microsoft YaHei',system-ui,sans-serif; }
  * { box-sizing:border-box; }
  body { margin:0; background:#151116; color:var(--ink); font:14px/1.6 var(--sans); }
  button,a { -webkit-tap-highlight-color:transparent; }
  button { font:inherit; cursor:pointer; color:inherit; }
  button:disabled { cursor:not-allowed; opacity:.42; }
  button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid #edcc92; outline-offset:4px; }
  button { touch-action:manipulation; }
  a { color:inherit; text-decoration:none; }
  h1,h2,h3,p { margin:0; }
  [hidden] { display:none!important; }
  ::selection { background:#795342; color:#fff8e9; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .skip-link { position:fixed; top:-100px; left:10px; background:#f0ddba; color:#231719; padding:10px; z-index:100; }
  .skip-link:focus { top:10px; }
  .eyebrow { font-size:10px; letter-spacing:.2em; color:var(--gold); font-weight:500; }
  .quiet { background:none; border:0; color:var(--muted); min-height:44px; padding:8px 10px; font-size:12px; }
  .quiet:hover { color:var(--ink); }
  .gold-button,.stand-button,.play-button { border:1px solid #c6a16b; border-radius:4px; padding:11px 20px; min-height:46px; white-space:nowrap; font-weight:600; font-size:13px; }
  .gold-button { color:#241a18; background:linear-gradient(115deg,#e8cea0,#c4a36e); box-shadow:0 3px 14px #0003,inset 0 1px #fff6; }
  .gold-button:hover:not(:disabled) { background:#eed7ae; }
  .stand-button { background:#251d22; color:#e1d5c2; border-color:#9f886453; }
  .stand-button:hover:not(:disabled) { border-color:#d0ae73; }
  .play-button { background:#544136; color:#e7cda0; border-color:#80643c; }
  .play-button:hover:not(:disabled) { background:#76583b; }
  kbd { margin-left:10px; font:10px var(--sans); opacity:.55; }
  .buttons { display:flex; gap:8px; align-items:center; }
  .close { border:1px solid var(--line); border-radius:50%; width:44px; height:44px; background:#ffffff05; font:26px var(--sans); flex-shrink:0; }
  .close:hover { background:#ffffff10; }
}
@layer layout {
  .joining { max-width:620px; margin:clamp(48px,12vh,140px) auto; padding:32px 24px; text-align:center; }
  .joining h1 { font:500 clamp(24px,5vw,36px)/1.4 var(--serif); margin:18px 0; letter-spacing:.02em; }
  .joining p { color:var(--muted); margin-bottom:28px; }
  .joining a { display:inline-flex; align-items:center; justify-content:center; }
  .topbar { height:76px; max-width:1680px; margin:auto; padding:0 36px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:20px; }
  .wordmark { display:flex; gap:12px; align-items:center; font:12px Georgia,serif; letter-spacing:.13em; }
  .wordmark b { color:var(--gold); font-weight:400; }
  .brand-seal { width:32px; height:38px; display:grid; place-items:center; border:1px solid #987746; border-radius:3px; color:#dec292; font:25px Georgia,serif; transform:rotate(-7deg); }
  .edition { font:10px var(--sans); color:#b9a991; letter-spacing:.16em; display:flex; align-items:center; gap:15px; }
  .edition i { height:3px; width:3px; border-radius:100%; background:var(--gold); }
  nav { display:flex; gap:4px; }
  .layout { display:grid; grid-template-columns:225px minmax(0,1fr); max-width:1600px; margin:auto; gap:38px; padding:28px 36px 12px; }
  .sidebar { min-width:0; display:flex; flex-direction:column; }
  .title-lockup { padding:10px 0 24px; border-bottom:1px solid var(--line); }
  h1 { margin-top:12px; font:500 46px/1.14 var(--serif); letter-spacing:.07em; }
  h1>span { display:block; font-size:64px; letter-spacing:.02em; }
  .title-diamond { color:var(--gold); font:20px Georgia,serif; margin-left:14px; vertical-align:middle; }
  .tagline { color:var(--muted); font:12px var(--serif); letter-spacing:.12em; margin-top:18px; }
  .session-heading { display:flex; justify-content:space-between; align-items:center; margin:24px 0 15px; font-size:12px; }
  .small-tag { font-size:10px; border:1px solid var(--line); border-radius:2px; color:var(--muted); padding:2px 6px; }
  .turn-box { display:flex; gap:12px; padding:14px; border:1px solid #c3a37145; background:#cfb57e09; border-radius:4px; }
  .turn-light { width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px #d1ae7330; flex-shrink:0; }
  .turn-box b { font-size:13px; font-weight:500; }
  .turn-box p { font-size:10px; color:var(--muted); margin-top:4px; line-height:1.7; }
  .turn-box.your-turn { border-color:#d1ae7380; background:#d1ae7312; }
  .turn-rule { display:grid; gap:6px; padding:17px 1px 22px; font-size:10px; letter-spacing:.02em; color:#ab9e8e; }
  .chronicle { border-top:1px solid var(--line); padding-top:18px; flex:1; min-height:170px; }
  .chronicle summary { font:12px var(--serif); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
  .chronicle summary span { font:8px var(--sans); letter-spacing:.15em; color:#a88a60; }
  #log { margin:16px 0 0; padding:0 5px 10px 0; list-style:none; max-height:247px; overflow:auto; scrollbar-width:thin; scrollbar-color:#70563a transparent; }
  #log li { color:#b8ab9a; font-size:11px; line-height:1.8; padding:0 0 10px 13px; position:relative; }
  #log li::before { content:''; position:absolute; width:3px; height:3px; background:#765d45; left:0; top:8px; border-radius:50%; }
  #log .log-trump,#log .log-result { color:#e3c49a; }
  #log .log-round { font-size:10px; opacity:.8; }
  .sidebar-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:16px; }
  .sidebar-bottom .quiet { padding-inline:0; font-size:10px; }
  .game-space { min-width:0; }
  .table-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--muted); font-size:10px; letter-spacing:.06em; }
  .table-meta>span:first-child { color:#d2b683; letter-spacing:.12em; }
  .live-dot { display:inline-block; height:4px; width:4px; border-radius:50%; background:#ddc08a; margin-right:7px; vertical-align:middle; }
  .table { position:relative; isolation:isolate; border:1px solid #96724060; border-radius:9px; padding:20px 30px 22px; background:#300f18 url('./assets/table.webp') center/cover; box-shadow:0 12px 35px #0004,0 0 0 5px #ffffff02; min-height:504px; overflow:hidden; }
  .table::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#210c18c9,#270b1457 35%,#1e101977); }
  .table-inscription { position:absolute; right:50%; transform:translateX(50%); top:15px; color:#e5d1a45c; font:8px Georgia,serif; letter-spacing:.28em; white-space:nowrap; }
  .seat { position:relative; padding-top:13px; }
  .player-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .identity { display:flex; align-items:center; gap:11px; }
  .avatar { display:grid; place-items:center; color:#d9c292; width:35px; height:35px; border:1px solid #b29b665a; background:#291723; border-radius:50%; font:25px Georgia,serif; }
  .ai-avatar { background:#3b202d; }
  .identity h2 { font:500 14px var(--serif); }
  .identity h2 span { margin-left:7px; color:#c2b1a5; font:9px var(--sans); }
  .health-line { font:10px var(--sans); display:flex; align-items:center; gap:12px; margin-top:5px; }
  .health-line strong { font-size:13px; font-weight:500; }
  .loss { color:#d1a5a0; }
  .life-track { position:absolute; left:46px; top:55px; height:2px; width:70px; background:#a985762e; }
  .life-track span { display:block; height:100%; background:#c4a26a; transition:width .5s; }
  .score { font-size:10px; color:#ceb9a9; text-align:right; }
  .score strong { display:block; font:30px/1 Georgia,var(--serif); color:#f2e6d1; margin-bottom:3px; }
  .score.bust strong { color:#e59c90; }
  .numbers { display:flex; justify-content:center; gap:9px; min-height:105px; margin-top:-17px; padding:0 40px 4px 155px; flex-wrap:wrap; align-items:center; }
  .num-card { position:relative; flex:0 0 66px; width:66px; height:92px; border-radius:5px; color:#3c2430; background:linear-gradient(125deg,#fbf1de,#d9cab1); border:1px solid #f9e7be; box-shadow:0 5px 9px #0005,inset 0 0 0 3px #c9ad7919; user-select:none; display:flex; align-items:center; justify-content:center; }
  .num-card .pip { font:42px/1 Georgia,serif; }
  .num-card .corner { position:absolute; top:4px; left:7px; font:12px/1.1 Georgia,serif; }
  .num-card .corner.bottom { inset:auto 7px 4px auto; transform:rotate(180deg); }
  .num-card .card-suit { position:absolute; bottom:10px; color:#845f55; font-size:13px; }
  .num-card.hole { border-color:#d7b376; }
  .hole-label { position:absolute; top:-8px; right:-5px; font:8px var(--sans); letter-spacing:.05em; background:#67503a; border:1px solid #bea375; border-radius:2px; padding:1px 4px; color:#f6e7cf; }
  .num-card.back { background:repeating-linear-gradient(45deg,transparent 0 6px,#c3a56e12 6px 7px),#38212b; border:1px solid #c0a06e; color:#c8a771; }
  .num-card.back::after { content:''; position:absolute; inset:5px; border:1px solid #b795655c; border-radius:2px; }
  .num-card.back .pip { font:34px Georgia,serif; }
  .num-card.back .card-suit { bottom:10px; color:#d1b27e; font-size:10px; }
  .effects-row { min-height:29px; display:flex; align-items:center; gap:8px; margin-top:5px; }
  .effects-label { color:#c0a796; font-size:9px; min-width:83px; }
  .effects { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
  .effect-slot { width:23px; height:23px; border:1px solid #a68c6533; border-radius:3px; background:#08060813; display:grid; place-items:center; color:#b5a08042; font:15px Georgia,serif; }
  .effect-chip { min-height:28px; border-radius:3px; padding:3px 8px; background:#16121bd4; border:1px solid #b698655c; font-size:10px; color:#e0c799; }
  .effect-chip:hover { background:#483126; }
  .effect-chip small { margin-left:6px; color:#b09b7f; }
  .opponent-hand { margin-left:auto; color:#c0a796; font-size:9px; white-space:nowrap; }
  .table-center { display:flex; align-items:center; justify-content:center; gap:58px; padding:12px 0 9px; margin:5px 0 2px; border-top:1px solid #d5b47a24; border-bottom:1px solid #d5b47a24; }
  .deck-wrap { text-align:center; font-size:9px; color:#cfb795; min-width:72px; }
  .deck { width:40px; height:56px; margin:0 auto 6px; background:repeating-linear-gradient(45deg,transparent 0 5px,#b0905820 5px 6px),#251b25; border:1px solid #9c7e53; border-radius:3px; transform:rotate(-8deg); display:grid; place-items:center; box-shadow:3px 2px #2b1b24,4px 3px #a18a63,7px 5px #201720,8px 6px #91774f; font-size:22px; }
  .target-lockup { width:240px; text-align:center; }
  .target-lockup>.eyebrow { font-size:9px; letter-spacing:.23em; }
  #target { display:block; font:64px/.98 Georgia,serif; color:#ead5ad; letter-spacing:-.07em; padding-right:4px; }
  #center-message { display:block; font:10px var(--serif); color:#c7ad94; margin-top:8px; }
  .table-note { display:flex; align-items:center; gap:13px; color:#b79574; font:9px/1.8 var(--serif); letter-spacing:.12em; min-width:95px; }
  .diamond { font-size:34px; }
  .human { margin-top:8px; }
  .hand-zone { padding-top:18px; }
  .hand-header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .hand-header h2 { font:13px var(--serif); }
  #hand-count { color:var(--gold); font:12px Georgia,serif; padding-left:7px; }
  .hand-header>span { font-size:10px; color:#ac9e8e; }
  .hand-header i { font-style:normal; padding:0 6px; color:var(--gold); }
  .hand-rack { display:flex; gap:10px; overflow-x:auto; min-height:163px; padding:14px 3px 10px; scrollbar-width:thin; scrollbar-color:#7f6741 transparent; align-items:flex-start; }
  .trump { width:109px; min-width:109px; height:141px; text-align:left; position:relative; padding:8px; background:linear-gradient(150deg,#312830,#211b24); border:1px solid #9d815454; border-radius:5px; box-shadow:0 3px 6px #0002; transition:transform .2s, border-color .2s, background .2s; }
  .trump::after { content:''; position:absolute; inset:4px; border:1px solid #a6845220; border-radius:2px; pointer-events:none; }
  .trump:hover { transform:translateY(-4px); border-color:#c4a56b; }
  .trump.selected { transform:translateY(-5px); border-color:#e8c78d; background:#423333; box-shadow:0 0 0 1px #e8c78d44,0 7px 16px #0004; }
  .trump-top { display:flex; justify-content:space-between; align-items:center; font-size:8px; color:#bda88e; }
  .trump-cost { color:#d8b679; letter-spacing:2px; }
  .trump-art { display:block; width:69px; height:68px; margin:2px auto 0; background-size:cover; background-position:center; border-radius:5px; mix-blend-mode:screen; }
  .art-shield { background-image:url('./assets/trump-shield.webp'); }
  .art-sword { background-image:url('./assets/trump-sword.webp'); }
  .art-eye { background-image:url('./assets/trump-eye.webp'); }
  .art-crown { background-image:url('./assets/trump-crown.webp'); }
  .art-scales { background-image:url('./assets/trump-scales.webp'); }
  .art-moon { background-image:url('./assets/trump-moon.webp'); }
  .trump-name { display:block; font:12px var(--serif); text-align:center; color:#f0debd; white-space:nowrap; margin-top:2px; }
  .trump-note { display:block; font-size:8px; color:#b6a28c; text-align:center; margin-top:4px; }
  .trump-value { position:absolute; inset:47px 0 auto; text-align:center; font:bold 27px Georgia,serif; color:#fff1cf; text-shadow:0 2px 7px #000; }
  .empty-hand { color:var(--muted); font:12px var(--serif); padding:42px 0; }
  .action-dock { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:13px; border-top:1px solid var(--line); min-height:85px; }
  .selection { min-width:0; max-width:560px; }
  .selection-label { font-size:10px; color:var(--gold); }
  .selection p { color:#b8aa9a; font-size:11px; line-height:1.7; margin-top:4px; }
  .selection .unavailable { color:#dc9e90; display:block; }
  .game-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0 0; font-size:9px; color:#958779; }
  .game-footer i { color:#987545; margin:0 5px; font-style:normal; }
}
@layer components {
  dialog { background:#20191f; color:var(--ink); border:1px solid #a98a5466; border-radius:10px; box-shadow:0 30px 100px #0009; padding:0; max-width:calc(100vw - 28px); max-height:calc(100dvh - 32px); }
  dialog::backdrop { background:#0b090cc9; backdrop-filter:blur(6px); }
  .welcome-dialog[open] { display:grid; grid-template-columns:1fr 1fr; width:820px; }
  .welcome-art { padding:30px; background:linear-gradient(#250e1d20,#190d16a1),url('./assets/table.webp') center/cover; display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height:530px; }
  .welcome-art .eyebrow { font-size:8px; letter-spacing:.22em; margin-top:15px; }
  .welcome-mark { border:1px solid #dfc08b99; outline:1px solid #d1ae7333; outline-offset:8px; border-radius:60px 60px 5px 5px; width:155px; height:224px; background:#21101866; display:flex; flex-direction:column; justify-content:center; align-items:center; font:100px/.9 Georgia,serif; color:#e2c38d; transform:rotate(-7deg); box-shadow:15px 15px 45px #0008; }
  .welcome-mark span { font-size:45px; margin-top:12px; }
  .welcome-art p { font:10px/1.8 Georgia,serif; letter-spacing:.2em; color:#cead7d; text-align:center; margin-bottom:14px; }
  .welcome-copy { padding:46px 38px 32px; }
  .welcome-copy h2 { font:36px/1.2 var(--serif); letter-spacing:.07em; margin:14px 0; }
  .welcome-copy h2 span { font:58px Georgia,var(--serif); display:block; }
  .welcome-lead { font:16px var(--serif); margin:18px 0 10px; }
  .welcome-copy>p:not(.welcome-lead) { color:var(--muted); font-size:12px; line-height:1.9; }
  .welcome-stats { display:flex; gap:35px; align-items:center; margin:24px 0; }
  .welcome-stats strong { display:block; font:31px Georgia,serif; color:var(--gold); }
  .welcome-stats span { font-size:10px; color:var(--muted); }
  .welcome-stats .versus { font:11px Georgia,serif; color:#9b7758; }
  .welcome-copy>.gold-button { width:100%; display:flex; justify-content:space-between; }
  .welcome-copy>.quiet { display:block; margin:auto; }
  .welcome-copy>small { display:block; font-size:9px; text-align:center; color:#a79784; margin-top:5px; }
  .rules-dialog { width:720px; }
  .dialog-heading { position:sticky; top:0; z-index:1; background:#20191ff5; display:flex; align-items:center; justify-content:space-between; padding:22px 28px; border-bottom:1px solid var(--line); }
  .dialog-heading h2 { font:24px var(--serif); margin-top:5px; }
  .rules-body { padding:24px 28px 35px; }
  .rules-body section+section { margin-top:24px; }
  .rules-body h3 { color:#e1c492; font:16px var(--serif); margin-bottom:10px; }
  .rules-body p { font-size:12px; color:#c9bdae; line-height:1.9; margin:8px 0; }
  .catalog { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .catalog article { border:1px solid var(--line); border-radius:4px; padding:12px; }
  .catalog h4 { margin:0; font:14px var(--serif); }
  .catalog p { font-size:11px; }
  .catalog small { color:var(--gold); font-size:9px; }
  .card-dialog { width:340px; padding:28px; text-align:center; }
  .card-dialog>.close { position:absolute; top:10px; right:10px; }
  .card-dialog .trump-art { width:140px; height:140px; margin:10px auto; }
  .card-dialog h2 { font:26px var(--serif); margin:15px 0; }
  .card-dialog p { font-size:13px; color:var(--muted); }
  .card-dialog small { display:block; color:var(--gold); margin-top:15px; }
  .confirm-dialog { width:390px; padding:28px; }
  .confirm-dialog h2 { font:25px var(--serif); }
  .confirm-dialog p { margin:15px 0 24px; color:var(--muted); font-size:12px; }
  .result-panel { position:absolute; z-index:5; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,90%); text-align:center; border:1px solid #b28d50; border-radius:6px; background:linear-gradient(120deg,#2a2028,#1d181f); padding:18px 24px; box-shadow:0 8px 60px #000a; }
  .result-panel h2 { font:27px var(--serif); color:#edd4a6; margin:7px 0; }
  .result-panel p { color:#c5b49c; font-size:12px; margin:7px 0 15px; }
  .result-panel .gold-button { min-height:40px; padding:8px 20px; }
  .pause-overlay { position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:25px; background:#171019d9; backdrop-filter:blur(5px); }
  .pause-overlay strong { font:35px var(--serif); }
  .toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:20; border:1px solid var(--gold); background:#35262e; color:#ffe4bc; padding:12px 22px; border-radius:6px; max-width:90vw; box-shadow:0 4px 25px #0008; font-size:13px; }
  .noscript { position:fixed; inset:0; background:#191119; display:grid; place-items:center; z-index:100; }
}
@layer motion {
  .impact-effect { position:absolute; z-index:6; left:50%; top:50px; display:flex; flex-direction:column; align-items:center; pointer-events:none; color:#f7d69d; text-shadow:0 2px 9px #000; white-space:nowrap; }
  .impact-effect>span { display:grid; place-items:center; width:70px; height:70px; border:1px solid currentColor; border-radius:50%; font:38px Georgia,serif; background:#261c22db; box-shadow:0 0 24px #d2a26045,inset 0 0 20px #d2a26015; }
  .impact-effect>b { font:11px var(--serif); margin-top:8px; padding:3px 9px; border-radius:3px; background:#21151fec; }
  .impact-silver { color:#dbe9e6; }
  .impact-red { color:#f7a39b; }
  @keyframes hit { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-5px); } 40% { transform:translateX(5px); } 65% { transform:translateX(-3px); } 85% { transform:translateX(2px); } }
  @keyframes target-glow { 0% { color:#fff1cc; text-shadow:0 0 30px #ecd195; } 100% { color:#ead5ad; text-shadow:none; } }
  .hit { animation:hit .32s ease-out; }
  .target-changed { animation:target-glow .7s ease-out; }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
}
@layer responsive {
  @media (min-width:1500px) { .table { min-height:550px; padding:25px 45px; } .numbers { min-height:121px; } .num-card { flex-basis:74px; width:74px; height:103px; } .table-center { padding-block:15px; } .trump { width:121px; min-width:121px; height:151px; } .hand-rack { min-height:174px; } .trump-art { width:76px; height:76px; } }
  @media (max-width:1180px) { .layout { grid-template-columns:185px minmax(0,1fr); gap:24px; padding:24px; } .topbar { padding-inline:24px; } .table { padding-inline:20px; } .numbers { padding-left:90px; padding-right:0; margin-top:3px; } h1 { font-size:37px; } h1>span { font-size:54px; } .table-center { gap:24px; } .action-dock { gap:12px; } .gold-button,.stand-button,.play-button { padding-inline:13px; } kbd { margin-left:5px; } }
  @media (max-width:920px) { .layout { display:block; padding:18px 20px; } .sidebar { display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; margin-bottom:16px; } .title-lockup { padding:0; border:0; } .title-lockup .eyebrow { font-size:8px; } h1 { font-size:24px; margin-top:3px; } h1>span { display:inline; font-size:29px; margin-left:6px; } .title-diamond { font-size:13px; } .tagline,.session-heading,.turn-rule { display:none; } .turn-box { padding:9px 12px; align-self:center; } .turn-box p { font-size:9px; } .chronicle { grid-column:1/-1; min-height:0; padding:0; border:0; margin-top:6px; } .chronicle summary { justify-content:flex-start; gap:14px; font-size:10px; min-height:32px; } .chronicle summary::after { content:'⌄'; margin-left:auto; } #log { max-height:110px; margin-top:7px; } .sidebar-bottom { display:flex; grid-column:1/-1; margin:0; border:0; } .sidebar-bottom .quiet { min-height:28px; padding-block:2px; } .edition { display:none; } .table { min-height:500px; } .numbers { padding-left:120px; padding-right:80px; } .game-footer { padding-bottom:8px; } }
  @media (max-width:600px) { .topbar { height:60px; padding:0 14px; gap:10px; } .wordmark { font-size:9px; gap:8px; letter-spacing:.04em; } .brand-seal { width:26px; height:31px; font-size:21px; } nav { gap:0; } nav .quiet { font-size:10px; padding:7px; } #pace { display:none; } .layout { padding:15px 12px; } .sidebar { gap:5px 10px; } h1 { font-size:21px; } h1>span { font-size:24px; } .title-diamond { display:none; } .turn-box { padding:8px; gap:7px; } .turn-box b { font-size:11px; } .turn-box p { font-size:8px; line-height:1.5; } .table-meta { font-size:8px; margin:0 1px 8px; } .table { padding:15px 12px; border-radius:7px; min-height:495px; background-size:auto 100%; } .table-inscription { font-size:5px; top:8px; letter-spacing:.25em; } .seat { padding-top:9px; } .identity { gap:8px; } .avatar { height:30px; width:30px; font-size:21px; } .identity h2 { font-size:13px; } .identity h2 span { font-size:8px; } .health-line { font-size:9px; gap:8px; } .health-line strong { font-size:12px; } .score strong { font-size:25px; } .score { font-size:8px; } .life-track { top:48px; left:39px; width:63px; } .numbers { margin-top:12px; padding:0; min-height:87px; gap:7px; } .num-card { width:54px; flex-basis:54px; height:76px; } .num-card .pip { font-size:34px; } .num-card .corner { font-size:10px; left:5px; } .num-card .card-suit { font-size:10px; bottom:7px; } .effects-row { margin-top:8px; flex-wrap:wrap; gap:4px 7px; } .effects-label { font-size:8px; min-width:auto; } .effect-slot { height:20px; width:20px; } .effect-chip { font-size:9px; padding:3px 6px; min-height:29px; } .opponent-hand { font-size:8px; } .table-center { gap:18px; padding:11px 0; margin-top:10px; } .deck-wrap { min-width:53px; font-size:8px; } .deck { width:31px; height:44px; font-size:18px; } .target-lockup { width:160px; } #target { font-size:54px; } #center-message { font-size:9px; margin-top:5px; } .table-note { display:none; } .target-lockup>.eyebrow { font-size:8px; } .hand-zone { padding-top:15px; } .hand-header h2 { font-size:12px; } .hand-header>span { font-size:8px; } .hand-header i { padding-inline:2px; } .trump { width:101px; min-width:101px; height:136px; } .hand-rack { min-height:158px; } .action-dock { display:block; padding-top:10px; } .selection { min-height:58px; padding-bottom:10px; } .selection p { font-size:11px; } .action-dock>.buttons { width:100%; } .action-dock button { flex:1; padding-inline:8px; font-size:12px; } kbd { display:none; } .game-footer { align-items:start; font-size:8px; padding-top:13px; } .game-footer span:first-child { max-width:230px; } .welcome-dialog[open] { grid-template-columns:1fr; width:380px; } .welcome-art { min-height:140px; height:140px; padding:12px; background-position:center 28%; } .welcome-art>.eyebrow,.welcome-art p { display:none; } .welcome-mark { height:92px; width:64px; border-radius:25px 25px 3px 3px; outline-offset:4px; font-size:40px; margin-top:10px; } .welcome-mark span { font-size:20px; margin-top:5px; } .welcome-copy { padding:25px; } .welcome-copy h2 { font-size:29px; margin:10px 0; } .welcome-copy h2 span { display:inline; font-size:35px; margin-left:8px; } .welcome-lead { font-size:15px; margin:14px 0 8px; } .welcome-stats { margin:16px 0; } .welcome-stats strong { font-size:25px; } .dialog-heading { padding:18px; } .rules-body { padding:20px 18px; } .catalog { grid-template-columns:1fr; } .result-panel { padding:16px; } .result-panel h2 { font-size:23px; } .result-panel p { font-size:11px; } }
}

@layer responsive {
  @media (max-width:600px) {
    body { padding-bottom:165px; }
    .table { min-height:435px; padding:12px 12px; }
    .numbers { min-height:69px; margin-top:8px; }
    .num-card { width:48px; flex-basis:48px; height:65px; }
    .num-card .pip { font-size:29px; }
    .num-card.back .pip { font-size:28px; }
    .effects-row { margin-top:5px; min-height:24px; }
    .effect-chip { min-height:27px; }
    .table-center { padding:8px 0; margin-top:8px; }
    #target { font-size:45px; }
    .human { margin-top:5px; }
    .action-dock { position:fixed; z-index:9; bottom:0; left:0; right:0; background:#1a141df7; backdrop-filter:blur(12px); padding:10px 12px max(12px, env(safe-area-inset-bottom)); box-shadow:0 -10px 30px #0003; }
    .selection { min-height:43px; max-height:100px; overflow-y:auto; }
    .selection p { margin-top:3px; }
    .sidebar { margin-bottom:9px; }
    .chronicle { margin-top:0; }
    .chronicle summary { min-height:26px; }
  }
}

@layer components {
  .selection.has-card { display:flex; align-items:center; gap:14px; width:100%; max-width:none; padding:14px 17px; border:1px solid #daba83; border-left:4px solid #f0ce8d; border-radius:7px; background:linear-gradient(110deg,#46313b,#2a232b); box-shadow:0 5px 24px #0004; }
  .selection-visual { flex:0 0 64px; }
  .selection-visual .trump-art { width:64px; height:64px; }
  .selection-copy { flex:1; min-width:0; }
  .selection-heading { display:flex; align-items:center; gap:12px; }
  .selection-heading strong { color:#ffe4ae; font:600 21px var(--serif); }
  .selection-heading>span { color:#ddcbb2; font-size:11px; }
  .selection-heading .close { width:28px; height:28px; font-size:20px; margin-left:auto; }
  .selection.has-card p { color:#fff2dc; font-size:15px; line-height:1.7; margin:7px 0; }
  .selection.has-card .unavailable { color:#ffd2c2; font-size:12px; background:#a1483938; border-left:2px solid #e7957d; padding:5px 8px; }
  .selection.has-card .selection-label { font-size:11px; color:#d9bc8e; }
  .action-dock:has(.has-card) { align-items:center; }
  .action-dock:has(.has-card)>.buttons { flex-shrink:0; }
  .room-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#332932; border:1px solid #b5965c77; border-radius:5px; padding:4px 12px; margin-bottom:12px; font-size:12px; }
  .room-bar .quiet { font-size:11px; flex-shrink:0; }
  .identity h2>b { font-weight:500; }
  #multiplayer { width:100%; margin-top:10px; }
  .welcome-dialog:has(#online-entry:not([hidden])) .welcome-stats { display:none; }
  .online-entry { grid-column:1/-1; border-top:1px solid var(--line); padding:24px 38px; background:#2b222a; }
  .online-entry h3 { font:23px var(--serif); color:#efd6a5; }
  .online-entry p { font-size:13px; color:#d5c4ac; margin:8px 0 16px; }
  .online-entry label { display:block; color:#e4c897; font-size:12px; margin:12px 0; }
  .online-entry input { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid #927954; border-radius:4px; background:#17121b; color:#fff0d6; font:16px var(--sans); }
  .online-entry input:focus-visible { outline:2px solid #e7c48a; outline-offset:2px; }
  .online-entry small { display:block; margin-top:12px; font-size:11px; color:#bdae9b; }
  #online-message { color:#ffe0a3; margin-bottom:0; }
  #online-wait { text-align:center; }
  #waiting-code { display:block; font:36px Georgia,serif; letter-spacing:.14em; color:#ffe2a3; }
  #invite-link { font-size:12px; margin-bottom:14px; }
  .card-dialog p { font-size:16px; line-height:1.85; color:#f5e7cf; }
  .card-dialog { width:390px; }
}
@layer responsive {
  @media (min-width:601px) and (max-width:1250px) { .action-dock:has(.has-card) { flex-wrap:wrap; } .action-dock:has(.has-card)>.buttons { margin-left:auto; } }
  @media (max-width:600px) {
    .selection.has-card { max-height:185px; padding:10px 12px; gap:0; margin-bottom:9px; }
    .selection-heading .close { flex:0 0 28px; padding:0; min-height:28px; }
    .selection-visual { display:none; }
    .selection-heading { gap:8px; }
    .selection-heading strong { font-size:19px; }
    .selection.has-card p { font-size:14px; line-height:1.65; margin:5px 0; }
    .selection.has-card .selection-label { font-size:10px; }
    .room-bar { font-size:10px; padding:4px 8px; }
    .online-entry { padding:20px; }
    .online-entry h3 { font-size:20px; }
    .online-entry .buttons button { flex:1; padding-inline:10px; }
    .toast { bottom:calc(var(--dock-height, 165px) + 12px); }
    body { padding-bottom:calc(var(--dock-height, 165px) + 20px); }
  }
}

/* Action ownership is visible at the table, including on small screens. */
.seat{position:relative;border:2px solid transparent;border-radius:12px;padding:14px 12px}.seat.is-active-turn{border-color:#e0bf78;background:linear-gradient(110deg,#d5aa5520,#d5aa5507);box-shadow:0 0 0 3px #c99b4810,inset 0 0 30px #bd90440a}.turn-badge{display:block;min-height:20px;font-size:12px;font-weight:700;letter-spacing:1px;color:#f3d495;margin-bottom:5px}.is-active-turn .avatar{box-shadow:0 0 0 3px #cda25755}.room-bar a{color:#e2c98e;text-decoration:none;padding:10px}.seat:not(.is-active-turn) .turn-badge{visibility:hidden}@media(max-width:600px){.seat{padding:10px 8px}.turn-badge{font-size:11px}}

.seat .life-track{position:static;margin:8px 0 0 46px}.skip-link{width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link:focus{width:auto;height:auto;clip-path:none}@media(max-width:600px){.seat .life-track{margin-left:39px}}

/* Seelie's active rule stays readable while the table remains interactive. */
.special-status{display:flex;align-items:center;gap:24px;padding:16px 20px;margin:0 0 12px;border:1px solid #ad98d477;border-left:3px solid #bea4eb;border-radius:9px;background:linear-gradient(100deg,#32253c,#201b28);color:#f0e7fc}.special-status>div{flex:0 0 180px}.special-status strong{display:block;font:500 20px/1.5 var(--serif);margin-top:5px}.special-status .eyebrow{color:#d2b8f1;font-size:10px}.special-status p{margin:0;font:13px/1.85 var(--sans);color:#e0d5ec}.effect-chip.special-effect{border-color:#b59ed3;background:#46334a;color:#f2ddff}.num-card.generated{background:linear-gradient(130deg,#e5d9ee,#bdaacb);border-color:#d8b5f1;box-shadow:0 0 0 2px #b18ac744,0 5px 9px #0005}.generated .hole-label{background:#604676;color:#fff}.catalog .special-catalog{border-color:#9273af;background:#33253933}.catalog .special-catalog h4{color:#dab6f4}@media(max-width:600px){.special-status{display:block;padding:12px 14px}.special-status strong{font-size:18px;margin-bottom:6px}.special-status p{font-size:12px;line-height:1.75}}

@layer components {

.timeout-notice { position:sticky; top:12px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; margin:12px 0; border:1px solid #d9a35c; border-radius:6px; background:#322219; color:#ffe4b8; box-shadow:0 4px 18px #0005; font-size:13px; }
.timeout-notice p { margin:0; }
.timeout-clock { font-size:12px; color:#eed2a9; }
.timeout-stay { flex-shrink:0; border:1px solid #d9a35c; border-radius:4px; color:#ffe4b8; background:#503b28; padding:8px 12px; min-height:44px; font:inherit; cursor:pointer; }
@media(max-width:600px) { .timeout-notice { flex-wrap:wrap; top:6px; padding:10px 12px; font-size:12px; } }
}

@layer layout {
  .layout { grid-template-columns:270px minmax(0,1fr); gap:28px; }
  .chronicle summary { font-size:15px; }
  #log { max-height:430px; scrollbar-gutter:stable; margin-top:12px; }
  #log li { font-size:13px; line-height:1.8; padding-bottom:12px; }
  #log .log-round { font-size:12px; }
}
@layer components {
  .tone-attack { --card-tone:#ffad9d; --card-wash:#69372f; }
  .tone-defense { --card-tone:#a1dee4; --card-wash:#264951; }
  .tone-utility { --card-tone:#ceb6ff; --card-wash:#453358; }
  #log .log-trump { color:var(--ink); border-left:3px solid var(--card-tone); background:color-mix(in srgb,var(--card-wash) 42%,transparent); padding:10px 11px; margin-bottom:9px; border-radius:0 5px 5px 0; }
  #log .log-trump::before { display:none; }
  .log-speaker { display:block; color:#d8cbbb; font-size:11px; overflow-wrap:anywhere; }
  .log-card { border:0; background:none; padding:3px 0; min-height:38px; color:var(--card-tone); font:600 17px var(--serif); text-align:left; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--card-tone) 40%,transparent); text-underline-offset:4px; }
  .log-category { display:inline-block; color:var(--card-tone); font-size:10px; margin-left:8px; border:1px solid currentColor; border-radius:3px; padding:0 5px; }
  .log-change,.log-note { font-size:12px; color:#f2e4cf; margin:3px 0 0; line-height:1.7; }
  #log-unread { color:#e8c590; border:1px solid #a58a5866; padding:2px 5px; border-radius:3px; font-size:10px; letter-spacing:0; }
  .metric-change { display:inline-block; padding:2px 6px; border:1px solid #e6c98e; border-radius:3px; color:#fff0c7; background:#493728; font:600 12px var(--sans); white-space:nowrap; }
  .metric-flash { color:#fff0c7!important; background:#6a4936; box-shadow:0 0 0 3px #dcb07580,0 0 18px #dcb07550; border-radius:3px; }
  .health-line { flex-wrap:wrap; }
  .sidebar { position:relative; }
  .title-lockup { min-height:288px; }
  .sidebar:has(.play-broadcast:not([hidden])) .title-lockup { visibility:hidden; }
  .broadcast-slot { position:absolute; top:0; left:0; width:100%; height:272px; margin:0; border:0; border-radius:8px; overflow:hidden; }
  .broadcast-rest { height:100%; display:none; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:16px; color:var(--muted); text-align:center; }
  .broadcast-slot:has(.play-broadcast:not([hidden])) .broadcast-rest { visibility:hidden; }
  .broadcast-rest strong { font:500 18px var(--serif); color:#d8c4a9; }
  .broadcast-rest>span:last-child { font-size:11px; }
  .play-broadcast { position:absolute; inset:0; z-index:1; pointer-events:none; display:grid; grid-template-columns:52px minmax(0,1fr); align-content:center; align-items:center; gap:4px 12px; width:100%; padding:14px; border:1px solid var(--card-tone); border-radius:8px; background:linear-gradient(125deg,var(--card-wash),#211b24 65%); box-shadow:inset 0 0 28px color-mix(in srgb,var(--card-tone) 12%,transparent); }
  .broadcast-card { grid-column:1; grid-row:1 / 3; color:var(--card-tone); }
  .broadcast-card .trump-art { width:52px; height:52px; margin:0; }
  .broadcast-card strong,.broadcast-card>span:last-child { display:none; }
  .broadcast-copy { display:contents; }
  .broadcast-who { grid-column:2; font-size:10px; letter-spacing:.05em; color:var(--card-tone); }
  .broadcast-copy h2 { grid-column:2; font:600 20px/1.4 var(--serif); color:#fff0db; margin:0; overflow-wrap:anywhere; }
  .broadcast-copy p { grid-column:1/-1; font-size:13px; line-height:1.75; color:#f4e7d9; margin-top:7px; }
  .broadcast-change { grid-column:1/-1; font-size:12px; color:var(--card-tone); margin-top:5px; }
  .broadcast-copy small { grid-column:1/-1; color:#c6b9a7; font-size:10px; margin-top:5px; }
  .effect-removed { color:#ffb3a0!important; border-color:#ff8873!important; box-shadow:0 0 18px #ff685d99; text-decoration:line-through; }
}
@layer responsive {
  @media (max-width:1100px) and (min-width:921px) { .layout { grid-template-columns:235px minmax(0,1fr); gap:18px; padding-inline:22px; } }
  @media (max-width:920px) { .title-lockup { min-height:0; } .sidebar:has(.play-broadcast:not([hidden])) .title-lockup { visibility:visible; } .broadcast-slot { position:relative; grid-column:1/-1; grid-row:4; height:210px; margin:4px 0 0; border:1px solid var(--line); } .broadcast-rest { display:flex; } .play-broadcast { padding:12px 16px; } #log { max-height:250px; } .chronicle summary { font-size:13px; min-height:36px; } }
  @media (max-width:600px) {
    .metric-change { font-size:10px; }
    .log-card { min-height:44px; }
  }
}

/* Midnight Wager: illustrated ordinary number deck. */
@layer components {
  .story-card { padding:0; isolation:isolate; background:#39272a; color:#fff0d5; }
  .number-illustration { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:4px; z-index:-2; }
  .story-card::after { content:''; position:absolute; inset:0; border-radius:4px; z-index:-1; background:linear-gradient(180deg,#110d0d16 30%,#130a09aa 75%,#170c0aee); box-shadow:inset 0 0 0 3px #e2bb7940; }
  .story-card .corner { top:3px; left:3px; min-width:20px; padding:2px 3px; background:#f0dfbd; color:#301c1a; border-radius:2px; font:bold 15px/1 Georgia,serif; text-align:center; box-shadow:0 1px 4px #0006; }
  .story-card .pip { position:absolute; bottom:5px; left:6px; font:600 30px/1 Georgia,serif; color:#fff2ce; text-shadow:0 2px 5px #000; }
  .number-title { position:absolute; bottom:7px; right:5px; max-width:34px; font:500 9px/1.3 var(--serif); color:#f2ddb9; text-shadow:0 1px 3px #000; }
  .story-card:hover { border-color:#fff0bc; box-shadow:0 0 0 2px #e5bb6555,0 5px 12px #0008; }
  .story-card:focus-visible { outline:2px solid #fff0bc; outline-offset:3px; }
  .story-card .hole-label { z-index:1; }
  .number-dialog { width:min(680px,calc(100vw - 28px)); padding:26px; max-height:90dvh; overflow:auto; }
  .number-dialog[open] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:28px; align-items:center; }
  .number-dialog>.close { position:absolute; top:6px; right:6px; z-index:2; background:#251b24ed; border-radius:50%; }
  .number-portrait { position:relative; aspect-ratio:2/3; padding:7px; border:1px solid #c6a16b; border-radius:8px; background:#30201d; box-shadow:0 12px 30px #0007,inset 0 0 0 3px #ad854335; }
  .number-portrait img { display:block; width:100%; height:100%; object-fit:cover; border-radius:3px; }
  .portrait-pip { position:absolute; left:14px; top:14px; min-width:40px; padding:6px; font:600 33px/1 Georgia,serif; text-align:center; color:#301c1a; background:#f0dfbd; border:1px solid #bb955a; border-radius:3px; box-shadow:0 2px 8px #0005; }
  .number-story-copy h2 { font:500 34px/1.5 var(--serif); color:#f2dfb9; margin:14px 0 18px; }
  .number-story-copy p { font:16px/2 var(--serif); color:#e3d7c6; }
  .number-point-label { display:inline-block; margin-top:24px; padding:5px 10px; border:1px solid var(--line); border-radius:3px; color:var(--gold); font-size:12px; }
  .number-story-copy small { display:block; margin-top:20px; font-size:10px; line-height:1.8; color:var(--muted); }
}
@layer responsive {
  @media (min-width:601px) { .num-card { width:74px; flex-basis:74px; height:108px; } .numbers { min-height:122px; } }
  @media (max-width:600px) {
    .num-card { width:60px; flex-basis:60px; height:88px; } .numbers { min-height:102px; }
    .story-card .corner { top:3px; left:3px; font-size:13px; min-width:18px; }
    .story-card .pip { font-size:27px; bottom:5px; left:5px; }
    .number-title { font-size:8px; right:4px; max-width:24px; bottom:6px; }
    .number-dialog { padding:24px 22px; max-height:92dvh; }
    .number-dialog[open] { grid-template-columns:1fr; gap:16px; }
    .number-portrait { width:min(100%,260px,32dvh); margin:auto; }
    .number-story-copy h2 { font-size:27px; margin:7px 0 10px; }
    .number-story-copy p { font-size:14px; line-height:1.8; }
    .number-point-label { margin-top:14px; } .number-story-copy small { margin-top:12px; }
  }
}

/* Life is a charged frame: numbers remain quiet and readable inside it. */
.life-zone { position:relative; isolation:isolate; padding:9px 12px; margin:-9px -12px; min-width:244px; --charge:#c6a16b; --charge-alpha:.28; }
.life-energy { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; color:var(--charge); transition:color .4s,opacity .4s; }
.life-energy path,.life-energy rect { fill:none; stroke:currentColor; vector-effect:non-scaling-stroke; }
.energy-rim { stroke-width:1; opacity:var(--charge-alpha); }
.energy-wire { opacity:0; stroke-width:1; filter:drop-shadow(0 0 3px currentColor); }
.life-crack { opacity:0; stroke:#ee9686; stroke-width:1.4; transition:opacity .45s; }
.life-zone[data-danger="0"] { --charge:#aad4da; --charge-alpha:.65; }
.life-zone[data-danger="1"] .wire-a { opacity:.36; }
.life-zone[data-danger="2"] { --charge:#e4b374; --charge-alpha:.5; }
.life-zone[data-danger="2"] .energy-wire { opacity:.56; }
.life-zone[data-danger="3"] { --charge:#ed936a; --charge-alpha:.7; }
.life-zone[data-danger="5"] { --charge:#ff795e; --charge-alpha:.9; }
.life-zone:is([data-danger="3"],[data-danger="5"]) .energy-wire { opacity:.85; stroke-dasharray:30 12 3 14; animation:charge-travel 4s linear infinite; }
.life-zone[data-danger="5"] .energy-rim { stroke-width:2; filter:drop-shadow(0 0 6px #ec603f); animation:charge-breathe 2.8s ease-in-out infinite; }
.life-zone[data-danger="5"] .wire-b { animation-direction:reverse; stroke-width:1.6; }
.life-zone.is-lethal { --charge:#e76767; }
.life-zone.is-lethal .life-crack,.life-shattered .life-crack { opacity:1; filter:drop-shadow(0 0 3px #cf3939); }
.life-zone.is-lethal .energy-rim { stroke:#d75f62; filter:drop-shadow(0 0 5px #b62435); }
.life-zone.is-protected .energy-rim { stroke-dasharray:4 3; stroke-width:2; }
.life-zone[data-danger="idle"] .energy-rim { opacity:.12; }
.life-shattered .energy-rim { stroke-dasharray:28 12 5 7; opacity:.38; }
.damage-burst { position:absolute; inset:-10px; pointer-events:none; color:#efcc8c; z-index:3; animation:burst-out 1.15s ease-out both; }
.damage-burst svg { position:absolute; width:100%; height:100%; overflow:visible; }
.damage-burst svg path,.damage-burst svg ellipse { fill:none; stroke:currentColor; stroke-width:1.5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px currentColor); }
.damage-burst .bolt-b,.damage-burst .shock-ring { display:none; }
.hit-number { position:absolute; right:0; top:-22px; font:600 26px var(--serif); text-shadow:0 2px 9px #100b10; }
.burst-0 { color:#b8e4df; }
.burst-0 .bolt { display:none; }
.burst-0 .shock-ring { display:block; stroke-dasharray:3 4; }
.burst-2 .bolt-b,.burst-3 .bolt-b,.burst-5 .bolt-b { display:block; }
.burst-3,.burst-5 { color:#fba27f; }
.burst-3 .shock-ring,.burst-5 .shock-ring { display:block; animation:shock-expand .75s ease-out both; transform-origin:center; }
.burst-5 svg path { stroke-width:3; filter:drop-shadow(0 0 9px #ff754d); }
.burst-5 .hit-number { font-size:34px; }
.burst-lethal { color:#ff9285; }
.shard { display:none; position:absolute; width:14px; height:9px; background:linear-gradient(125deg,#eab7a0,#6d2a37); clip-path:polygon(0 0,100% 28%,36% 100%); }
.burst-lethal .shard { display:block; animation:shatter .9s cubic-bezier(.2,.7,.3,1) both; }
.shard-a { left:0; top:0; --dx:-22px; --dy:-18px; }
.shard-b { right:0; top:0; --dx:26px; --dy:-13px; }
.shard-c { left:0; bottom:0; --dx:-20px; --dy:25px; }
.shard-d { right:0; bottom:0; --dx:24px; --dy:29px; }
@keyframes charge-travel { to { stroke-dashoffset:-118; } }
@keyframes charge-breathe { 50% { opacity:.5; } }
@keyframes burst-out { 0% { opacity:0; } 10%,45% { opacity:1; } 100% { opacity:0; } }
@keyframes shock-expand { from { transform:scale(.55); opacity:1; } to { transform:scale(1.1); opacity:0; } }
@keyframes shatter { to { translate:var(--dx) var(--dy); rotate:55deg; opacity:0; } }
.visuals-hidden .life-energy *, .life-offscreen .life-energy *, .visuals-paused .life-energy * { animation-play-state:paused!important; }
.hand-tools { display:flex; align-items:center; gap:14px; }
#sort-hand { border:1px solid #a98a5470; padding:6px 12px; border-radius:4px; color:#edd7ab; font-size:12px; }
#sort-hand:disabled { opacity:.4; }
.match-dialog { width:660px; padding:34px; background:radial-gradient(ellipse at 50% 0,#4e3038,transparent 65%),#20191f; }
.match-dialog h2 { font:30px var(--serif); margin:10px 0 24px; }
.match-dialog .close { z-index:1; }
.match-table { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
.match-table th,.match-table td { padding:16px 10px; border-bottom:1px solid #b7996726; text-align:center; overflow-wrap:anywhere; }
.match-table thead th { font:18px var(--serif); color:#efd8ad; }
.match-table tbody th { width:38%; font-size:12px; font-weight:400; color:#c7b4aa; }
.match-table td { font:24px var(--serif); }
.match-table tr:first-child td { color:#f2bc91; font-size:32px; }
.match-dialog .buttons { justify-content:flex-end; margin-top:26px; }
.match-note { font-size:12px; color:#c7b4aa; margin-top:18px; }
@media (prefers-reduced-motion:reduce) { .life-energy *, .damage-burst,.damage-burst * { animation:none!important; transition:none!important; } .burst-lethal .shard { display:none; } }
@media (max-width:600px) { .life-zone { min-width:0; padding:7px; margin:-7px; } .hand-tools>span { display:none; } .match-dialog { padding:25px 16px; } .match-table th,.match-table td { padding:14px 4px; } }
.match-dialog { position:fixed; inset:0; margin:auto; }
.match-dialog>.close { position:absolute; top:16px; right:16px; }
.life-zone[data-danger="1"] .wire-a { stroke-dasharray:46 16; animation:charge-travel 12s linear infinite; }
.life-zone[data-danger="2"] .energy-wire { stroke-dasharray:40 19; animation:charge-travel 8s linear infinite; }
.life-zone[data-danger="2"] .wire-b { animation-direction:reverse; }
.energy-sparks { opacity:0; fill:currentColor; stroke:none; }
.life-zone[data-danger="5"] .energy-sparks { opacity:.65; filter:drop-shadow(0 0 4px currentColor); animation:charge-breathe 3.8s ease-in-out infinite; }
.burst-5 .shard { display:block; width:5px; height:3px; animation:shatter .8s ease-out both; background:#ffc496; }
.burst-lethal .shard { width:14px; height:9px; background:linear-gradient(125deg,#eab7a0,#6d2a37); }
@media (prefers-reduced-motion:reduce) { .life-energy *, .damage-burst,.damage-burst * { animation:none!important; } .damage-burst .shard { display:none; } }

.solo-deck-label {display:block;font-size:12px;color:var(--muted);margin:12px 0}.solo-deck-label select,.selection-copy select,.selection-copy input {padding:8px;border:1px solid var(--line);background:#231b20;color:var(--ink);border-radius:4px;font:inherit;max-width:100%}.solo-deck-label select {display:block;width:100%;margin-top:6px}.choice-panel{position:relative;z-index:2;padding:16px 24px;background:#241a22f5;border:1px solid #d1ae73;box-shadow:0 8px 25px #0008;max-width:1000px;margin:12px auto}.choice-panel>div{display:flex;gap:12px}.choice-panel button{display:flex;flex:1;align-items:center;gap:10px;text-align:left;padding:10px;color:var(--ink);background:#382934;border:1px solid var(--line);border-radius:4px}.choice-panel .trump-art{width:65px;height:65px;flex-shrink:0;background-size:cover;background-position:center}.choice-panel button span:last-child{font-size:11px}.choice-panel button b{white-space:nowrap;flex-shrink:0}.choice-panel p{color:var(--muted);font-size:12px;margin:6px 0 12px}.selection-copy label{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}@media(max-width:700px){.choice-panel>div{flex-direction:column}.choice-panel{padding:12px}.choice-panel button{min-height:60px}}