.table-top>div:first-child{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.table-top h2{font-size:30px;line-height:1.1}
.table-top .subtle{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;line-height:1.3}
.table-top .players{flex-wrap:nowrap;overflow-x:auto;max-width:50%;padding:4px;scrollbar-width:thin}
.table-top .player{flex:none;min-height:48px}
.hand{max-width:var(--hand-width,100%)}
.hand [data-bg] .print-rule{grid-template-columns:minmax(0,1fr);height:auto;min-height:64px;font-size:11px;line-height:1.3;padding:6px 7px;gap:4px}
.hand [data-bg] .print-rule>.rule-diagram{display:none}
.hand .rule-copy{overflow-wrap:normal;word-break:normal}
#view-own{display:none}
.choosing-layers .mix-area{display:none}
.print-rule{min-height:68px}
.foreground .print-rule{min-height:45px}
.hand-label{margin:10px 0 6px}
.gallery .explanation{padding:12px 0 0;font-size:11px;min-height:54px}
.gallery:has(.slot.active) .explanation{visibility:hidden}
.board{gap:12px;min-height:0}
.board .print-rule{min-height:68px;height:auto;padding:6px 8px;font-size:11px;line-height:1.3}
.board .rule-copy{display:block;overflow-wrap:normal;word-break:normal}
.board .slot{height:auto;min-height:0;aspect-ratio:auto}
.board .slot .print{height:auto;display:block}
.board .slot .art{aspect-ratio:1}
.board .slot .print-rule{display:grid;flex:none}
.gallery-head{flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
.gallery-head h3{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.gallery-head>span{flex:none;white-space:nowrap}
.gallery-head>button{flex:0 1 auto;min-height:44px;line-height:1.25}
.placing-print .studio-title .subtle{display:none}
.history{margin-top:12px}
.opponent-previews{scrollbar-width:thin}
.opponent-enlarged{position:fixed;z-index:48;pointer-events:auto;width:min(390px,calc((100dvh - 190px)*.9),calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:14px;background:#fff9eb;border:2px solid var(--ink);border-radius:7px;box-shadow:5px 9px 24px #25222240;color:var(--ink)}
.opponent-enlarged[hidden]{display:none}
.glance-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.glance-heading strong{font:700 22px 'Fraunces',Georgia;overflow-wrap:anywhere}
.glance-heading span{font-size:12px}
.glance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.glance-grid .print{box-shadow:none}
.glance-grid .print-rule{height:40px;min-height:40px;padding:3px;font-size:9px;display:flex}
.glance-grid .rule-copy,.glance-grid .rule-diagram,.glance-grid .rule-points small{display:none}
.glance-grid .rule-points{gap:4px;flex-wrap:nowrap}
.glance-grid .target-icon{width:20px;height:20px}
.glance-card{position:relative;min-width:0}
.glance-card.glance-match{outline:3px solid var(--pink);outline-offset:0;border-radius:5px}
.glance-card>i{position:absolute;top:-5px;right:-4px;width:19px;height:19px;display:grid;place-items:center;background:var(--pink);color:#fff;border-radius:50%;font:800 13px Arial;font-style:normal;z-index:2}
.glance-empty{aspect-ratio:1/1.3;border:1px dashed #756650;border-radius:5px;background:#e8ddc9}
.opponent-enlarged>p{font-size:11px;line-height:1.3;margin:10px 0 0}
@media(min-width:680px){
  .choosing-layers .workspace,.placing-print .workspace{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px}
  .studio-title h3{font-size:19px}
  .studio-title .subtle{font-size:12px}
  .studio-title .text-button{font-size:11px}
  .mix-area{margin-top:12px;padding-top:12px}
  .placing-print .studio:has(>.hand){display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:12px;align-content:start}
  .placing-print .studio:has(>.hand)>.studio-title,.placing-print .studio:has(>.hand)>.history{grid-column:1/-1}
  .placing-print .studio>.hand-label,.placing-print .studio>.hand{grid-column:2}
  .placing-print .mix-area{grid-column:1;grid-row:2/span 4;grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;gap:10px;margin:8px 0 0;padding:0;border-top:0}
  .placing-print .mixed-print{width:100%;max-width:140px;justify-self:center}
  .placing-print .mix-copy h3,.placing-print .mix-copy p{display:none}
  .placing-print .mix-copy button{font-size:11px;padding:7px 6px;line-height:1.3;min-height:44px}
  .gallery-head h3{font-size:18px}
  .gallery-head{margin-bottom:12px}
  .gallery-head>button{font-size:11px;padding:7px 10px}
  .history{font-size:11px}
}
@media(min-width:680px){
  .critics-rack{gap:10px;margin-bottom:10px}
  .critic-note{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;flex:1;max-width:600px}
  .critic-note>span{display:none}
  .critic-note strong{font:700 14px/1.2 'DM Sans',Arial;min-width:0}
  .critic-note b{flex:none;font-size:11px}
}
@media(min-width:1000px){
  header{padding:8px 20px}
  main:has(.play-table){max-width:1920px;padding:10px 20px 12px}
  .table-top{margin-bottom:8px}
  .studio{padding-top:0}
  .choosing-layers .workspace,.placing-print .workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
  .placing-print .studio:has(>.hand){grid-template-columns:124px minmax(0,1fr);column-gap:16px}
}
@media(min-width:1000px){
  .play-table{display:grid;grid-template-columns:minmax(0,1fr) 125px;column-gap:20px;align-items:start}
  .play-table:has(.many-opponents){grid-template-columns:minmax(0,1fr) 210px}
  .table-top,.critics-rack{grid-column:1/-1}
  .workspace{grid-column:1;grid-row:3}
  .play-table:not(:has(.critics-rack)) .workspace{grid-row:2}
  .opponent-overview{grid-column:2;grid-row:3;display:block;border:0;border-left:1px solid var(--line);padding:0 0 0 12px;margin:0;max-height:var(--play-height,70dvh);overflow-y:auto}
  .play-table:not(:has(.critics-rack)) .opponent-overview{grid-row:2}
  .opponent-overview-heading{margin-bottom:8px}
  .opponent-overview-heading h3{font-size:16px}
  .opponent-overview-heading p{font-size:10px}
  .opponent-previews{display:grid;overflow:visible;padding:4px;gap:7px}
  .opponent-preview{padding:4px;min-width:0}
  .many-opponents .opponent-previews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .many-opponents .opponent-preview{gap:2px}
  .many-opponents .opponent-mini-grid{width:66px}
  .many-opponents .opponent-relation{font-size:9px}
  .many-opponents .opponent-preview>strong{font-size:10px}
  .many-opponents .opponent-mini-status{font-size:9px;min-height:14px}
}
@media(max-width:999px) and (min-width:680px){
  .table-top .players{max-width:100%;width:100%}
  .workspace{gap:18px}
  .choosing-layers .workspace,.placing-print .workspace{grid-template-columns:minmax(210px,.9fr) minmax(0,1.1fr);gap:18px}
  .placing-print .studio:has(>.hand){grid-template-columns:100px minmax(0,1fr);column-gap:12px}
  .studio-title .subtle{display:none}
}
@media(max-width:679px){
  header{flex-wrap:nowrap;padding:8px 14px;gap:8px;min-height:60px}
  .wordmark{font-size:27px;white-space:nowrap}
  .wordmark i{display:none}
  nav{flex-wrap:nowrap;gap:4px}
  nav #help,nav #settings{font-size:0;width:44px;height:44px;padding:6px}
  nav #help::after{content:'?';font:800 23px 'DM Sans',Arial}
  nav #settings::after{content:'♪';font:800 25px 'DM Sans',Arial}
  main:has(.play-table){padding-top:10px;padding-bottom:10px}
  .table-top>div:first-child{gap:8px}
  .table-top h2{font-size:23px}
  .table-top .subtle{font-size:10px}
  .table-top .text-button{font-size:10px;min-width:44px;padding:2px 4px}
  .table-top .players{display:none}
  .critics-rack{gap:7px;margin-bottom:9px}
  .critic-note{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;padding:6px 8px;min-height:44px}
  .critic-note>span{display:none}
  .critic-note strong{font:700 12px/1.2 'DM Sans',Arial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .critic-note b{font-size:10px}
  .opponent-overview{margin-bottom:10px}
  .studio-title .subtle{display:none}
  .studio-title h3{font-size:17px}
  .studio-title .text-button{font-size:11px}
  #view-own{display:block;font-size:11px;padding:6px;min-height:44px}
  .choosing-layers .gallery{display:none}
  .hand-label{font-size:12px;margin:8px 0 5px}
  .hand-label>span{font-size:10px}
  .hand .print-rule{min-height:69px;font-size:10px}
  .hand .foreground .print-rule{min-height:44px}
  .placing-print .studio{display:block}
  .placing-print .mix-area{grid-template-columns:minmax(100px,125px) minmax(0,1fr);gap:12px;margin-top:12px;padding-top:12px}
  .placing-print .mix-copy h3,.placing-print .mix-copy p{display:none}
  .placing-print .mix-copy button{font-size:12px;min-height:44px}
  .board{gap:10px}
  .board .slot{min-height:0}
  .board .slot .print-rule{min-height:68px;height:auto;font-size:10px;line-height:1.3}
  .gallery-head{gap:8px;margin-bottom:8px}
  .gallery .explanation{font-size:10px;padding-top:22px}
  .workspace{gap:14px}
  .finale-print .rule-points b::after{content:' base';font-size:8px}
}