:root{
  color-scheme:light;
  --ink:#241b13;
  --muted:#74685d;
  --line:#c7b39a;
  --paper:#f8f2e8;
  --paper-2:#efe3d2;
  --dark:#2c241e;
  --dark-2:#1d1814;
  --wood:#d7aa72;
  --accent:#6a4528;
  --danger:#8b3429;
  --target:#5f7f3e;
  --shadow:rgba(38,25,15,.2);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  min-width:320px;
  overflow:hidden;
  background:#d8cfc2;
  color:var(--ink);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
button,select{font:inherit}
button{touch-action:manipulation}
.hidden{display:none!important}

.app-shell{
  width:100%;
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  background:linear-gradient(180deg,#eee6db 0%,#d7cab9 100%);
}

/* Header */
.topbar{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--dark);
  color:#f8f0e6;
  border-bottom:2px solid #8b633f;
}
.topbar h1{
  margin:0;
  font-size:22px;
  line-height:1;
  letter-spacing:.12em;
  white-space:nowrap;
}
.match-control-strip{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.game-settings{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
.setting-summary-button{
  min-width:0;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border:1px solid #796755;
  background:#3a3028;
  color:#fff8ed;
  cursor:pointer;
  white-space:nowrap;
}
.setting-summary-button span{color:#cbbbae;font-size:10px}
.setting-summary-button strong{font-size:12px}
.setting-summary-button:hover{border-color:#d6b382;background:#493b30}
.scoreboard,.match-meta{
  display:grid;
  gap:3px;
}
.scoreboard{grid-template-columns:repeat(3,minmax(64px,1fr))}
.match-meta{grid-template-columns:minmax(62px,1fr)}
.scoreboard>div,.match-meta>div{
  min-width:0;
  padding:4px 8px;
  border:1px solid #665546;
  background:var(--dark-2);
  text-align:center;
}
.scoreboard span,.match-meta span{
  display:block;
  color:#bcada0;
  font-size:9px;
  line-height:1.05;
}
.scoreboard strong,.match-meta strong{
  display:block;
  margin-top:1px;
  color:#fff8ed;
  font-size:16px;
  line-height:1.05;
  white-space:nowrap;
}
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
}
.header-actions .secondary-btn{
  min-height:38px;
  padding:6px 11px;
  border-color:#806b59;
  background:#3a3028;
  color:#f4eade;
  font-size:12px;
  white-space:nowrap;
}
.sound-toggle{min-width:56px}
.sound-toggle[aria-pressed="true"]{
  border-color:#d4b27d!important;
  background:#c59a61!important;
  color:#25170d!important;
}
.sound-toggle[aria-pressed="false"]{opacity:.82}

/* Main 3-column table */
.board-grid{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  padding:7px;
  overflow:hidden;
}
.capture-panel{
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:7px;
  border:1px solid #baa894;
  background:rgba(249,244,236,.96);
}
.cpu-panel,.player-panel{
  display:grid;
  grid-template-rows:auto 144px auto minmax(0,1fr);
}
.panel-title{
  margin:0 0 5px;
  padding:0 1px 5px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:700;
}
.progress-title{
  margin:6px 0 4px;
  color:#5e4b3b;
  font-size:12px;
  font-weight:700;
}
.capture-list{
  min-width:0;
  min-height:0;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  align-items:flex-end;
  justify-content:flex-start;
  gap:5px;
  padding:5px 3px 8px;
  overflow:hidden;
  scrollbar-width:thin;
}
.role-list{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:5px;
  padding-right:2px;
  overflow:hidden;
}
.capture-panel>.role-list{
  grid-template-rows:repeat(8,minmax(0,1fr));
}

.role-chip{
  min-width:0;
  padding:4px 6px;
  border:1px solid #b8a38a;
  background:#fffaf2;
  color:inherit;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
}
.role-chip:hover{border-color:#8c6b49;background:#fcf0df}
.role-chip.claim-blocked{
  background:#f4f0ea;
  border-color:#c8beb1;
}
.role-chip.claim-blocked .role-status{
  color:#9b5d45;
  font-weight:700;
}
.role-chip.claim-owned .role-status{
  color:#5b4429;
  font-weight:700;
}
.role-chip.active{
  border-color:#8a5f34;
  background:#f1dfc5;
  box-shadow:inset 0 0 0 1px rgba(117,76,39,.1);
}
.role-top{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
}
.role-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
}
.role-points{
  color:#6e4425;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.role-requirement{
  margin-top:1px;
  color:#4e4034;
  font-size:10px;
  line-height:1.05;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.role-status{
  margin-top:1px;
  color:var(--muted);
  font-size:10px;
  line-height:1.05;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.role-chip.active .role-status{color:#53361f;font-weight:700}
.role-meter{
  height:3px;
  margin-top:2px;
  overflow:hidden;
  border-radius:999px;
  background:#e4d8ca;
}
.role-meter>span{display:block;height:100%;background:#9b7a54}
.role-chip.active .role-meter>span{background:#6f4a27}

/* Center play area */
.center-zone{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) 128px;
  gap:6px;
  overflow:hidden;
}
.field-wrap{
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:30px 108px minmax(0,1fr);
  overflow:hidden;
  border:7px solid #6a4930;
  background:linear-gradient(145deg,#dcb681 0%,#d2a467 48%,#c99458 100%);
  box-shadow:inset 0 0 0 2px #ead1a8,0 4px 12px var(--shadow);
}
.field-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.12),transparent 32%),radial-gradient(ellipse at 72% 74%,rgba(87,48,18,.08),transparent 36%);
}
.field-head{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:4px 8px;
  background:rgba(41,29,20,.86);
  color:#f8efe3;
  font-size:11px;
}
.field-head>span:first-child{flex:0 0 auto;font-weight:700}
.field-head-actions{
  position:absolute;
  inset:0;
  min-width:0;
  pointer-events:none;
}
.message{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% - 96px);
  transform:translate(-50%,-50%);
  overflow:hidden;
  color:#f0d8ac;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stock-strip{
  position:relative;
  z-index:3;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);
  align-items:center;
  gap:5px;
  padding:5px 10px 4px;
  border-bottom:1px solid rgba(86,53,27,.26);
  background:rgba(255,246,228,.15);
}
.stock-center{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  align-self:stretch;
  pointer-events:none;
}
.stock-title{
  color:#4b321f;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.stock-pile{
  position:relative;
  width:58px;
  height:70px;
}
.stock-card{
  position:absolute;
  left:2px;
  top:0;
  width:53px;
  height:65px;
  clip-path:polygon(50% 0%,91% 16%,100% 100%,0 100%,9% 16%);
  background:linear-gradient(105deg,#8a5b31 0%,#c49155 16%,#dfbb83 50%,#b77e45 86%,#724523 100%);
  box-shadow:0 2px 3px rgba(42,28,15,.22);
}
.stock-card::after{
  content:"";
  position:absolute;
  inset:4px;
  clip-path:inherit;
  background:linear-gradient(100deg,#c8975c,#e6c28d 48%,#bd864e);
}
.stock-card-3{transform:translate(5px,5px);filter:brightness(.78)}
.stock-card-2{transform:translate(2px,2px);filter:brightness(.9)}
.stock-pile.empty{opacity:.22}

.draw-zone{
  min-width:0;
  height:92px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  overflow:visible;
}
.cpu-draw-zone{grid-column:1;justify-self:center}
.player-draw-zone{grid-column:3;justify-self:center}
.draw-label{display:none}
.draw-card-slot{
  width:86px;
  height:88px;
  display:grid;
  place-items:center;
}
.draw-card-slot .koma{transform:scale(.88);transform-origin:center}

.field-layout{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.field{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  align-items:flex-end;
  justify-content:center;
  gap:9px;
  padding:10px 12px 44px;
  overflow:hidden;
}
.field-action-dock{
  position:absolute;
  left:50%;
  bottom:15px;
  z-index:20;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:0;
  background:transparent;
  pointer-events:none;
}
.field-action-dock .draw-action-large{pointer-events:auto}
.draw-action-large{
  min-width:172px;
  min-height:38px;
  padding:5px 16px;
  border:1px solid #4b311f;
  background:#573925;
  color:#fff;
  box-shadow:0 2px 7px rgba(41,26,15,.28);
  cursor:pointer;
  font-size:14px;
  font-weight:700;
}
.draw-action-large:hover{filter:brightness(1.08)}

.player-row{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  padding:6px 8px 10px;
  border:1px solid #baa894;
  background:rgba(249,244,236,.94);
}
.hand-label{
  margin:0 0 3px;
  color:#65574a;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.player-row-content{min-width:0;min-height:0}
.hand-current-score{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:#5d4a39;
  white-space:nowrap;
}
.hand-current-score>span{font-size:10px}
.hand-current-score strong{color:#5a351d;font-size:15px}
.player-hand{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  padding:3px 0 8px;
  overflow:visible;
  touch-action:pan-y;
}

/* Pieces: one renderer / one glyph geometry everywhere */
.koma{
  --w:62px;
  --h:74px;
  --koma-shape:polygon(50% 0%,91% 16%,100% 100%,0 100%,9% 16%);
  position:relative;
  flex:0 0 auto;
  width:var(--w);
  height:calc(var(--h) + 4px);
  padding:0;
  border:0;
  background:transparent;
  cursor:default;
  filter:drop-shadow(0 2px 2px rgba(42,28,15,.2));
  transform-origin:bottom center;
}
.koma::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:var(--w);
  height:var(--h);
  clip-path:var(--koma-shape);
  background:linear-gradient(100deg,#70441f 0%,#996536 50%,#5f361a 100%);
}
.koma-shape{
  position:absolute;
  left:0;
  bottom:3px;
  width:var(--w);
  height:var(--h);
  overflow:hidden;
  clip-path:var(--koma-shape);
  background:linear-gradient(100deg,#bd894b 0%,#e8bf82 14%,#f1d19d 48%,#d5a56a 86%,#a96f37 100%);
  box-shadow:inset 0 0 0 1px rgba(94,55,24,.16);
}
.koma-shape::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.58;
  background:linear-gradient(96deg,transparent 0 20%,rgba(117,72,34,.07) 32%,transparent 46%,rgba(255,255,255,.08) 63%,transparent 78%);
}
.koma-shape::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 -2px 0 rgba(80,44,17,.16),inset 0 1px 0 rgba(255,255,255,.07);
}
.koma-glyphs{
  position:absolute;
  z-index:2;
  left:10%;
  right:10%;
  top:15.5%;
  bottom:6.5%;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.koma-glyphs[data-count="2"]{
  top:11%;
  bottom:5%;
  grid-template-rows:1fr 1.08fr;
  gap:0;
}
.koma-glyph{
  width:88%;
  height:88%;
  overflow:visible;
  transform-origin:center;
}
.koma-glyphs[data-count="2"] .koma-glyph{width:82%;height:82%}
.koma-glyph path{fill:#20150e}
.koma.promoted .koma-glyph path{fill:#98271f}
.koma-glyph-fallback{
  display:grid;
  place-items:center;
  color:#20150e;
  font-size:24px;
  font-weight:700;
}
.koma.tiny{--w:48px;--h:60px}
.koma.slim{--w:54px;--h:66px}
.koma.small{--w:58px;--h:70px}
.koma.medium{--w:62px;--h:74px}
.koma.large{--w:68px;--h:80px}
.koma.royal{--w:74px;--h:86px}
.koma.selectable{cursor:pointer;transition:transform .12s ease,filter .12s ease}
.koma.selectable:focus-visible{outline:2px solid #725237;outline-offset:2px}
.koma.selected{transform:translateY(-8px)}
.koma.selected .koma-shape{filter:drop-shadow(0 0 4px white) drop-shadow(0 0 3px #4b3423)}
.koma.target{
  transform:translateY(-9px);
  filter:drop-shadow(0 7px 4px rgba(39,66,24,.36));
}
.koma.target .koma-shape{
  background:linear-gradient(100deg,#b7964f 0%,#ead991 20%,#f4e5ad 50%,#d0b66f 88%,#a88442 100%);
  filter:drop-shadow(0 0 4px #fff8bf) drop-shadow(0 0 8px var(--target));
  animation:targetGlow 1.05s ease-in-out infinite alternate;
}
@keyframes targetGlow{
  from{filter:drop-shadow(0 0 3px #fff8bf) drop-shadow(0 0 5px var(--target))}
  to{filter:drop-shadow(0 0 7px #fff4a8) drop-shadow(0 0 11px var(--target))}
}
@media (prefers-reduced-motion:reduce){
  .koma.target .koma-shape{animation:none}
}

/* Hand scales to available width rather than wasting empty space */
.player-hand .koma.tiny{--w:clamp(30px,3.05vw,45px);--h:clamp(38px,3.78vw,56px)}
.player-hand .koma.slim{--w:clamp(33px,3.35vw,49px);--h:clamp(41px,4.12vw,60px)}
.player-hand .koma.small{--w:clamp(36px,3.65vw,53px);--h:clamp(44px,4.45vw,64px)}
.player-hand .koma.medium{--w:clamp(39px,3.9vw,57px);--h:clamp(47px,4.72vw,68px)}
.player-hand .koma.large{--w:clamp(42px,4.2vw,61px);--h:clamp(51px,5.02vw,72px)}
.player-hand .koma.royal{--w:clamp(45px,4.45vw,65px);--h:clamp(54px,5.28vw,76px)}

/* Captured pieces start large; only shrink when the list is genuinely dense */
.capture-list .koma.tiny{--w:29px;--h:37px}
.capture-list .koma.slim{--w:34px;--h:42px}
.capture-list .koma.small{--w:38px;--h:46px}
.capture-list .koma.medium{--w:42px;--h:50px}
.capture-list .koma.large{--w:46px;--h:54px}
.capture-list .koma.royal{--w:50px;--h:58px}
.capture-list.dense{gap:3px}
.capture-list.dense .koma{transform:scale(.9);transform-origin:left bottom;margin-right:-4px;margin-top:-3px}
.capture-list.very-dense{gap:2px}
.capture-list.very-dense .koma{transform:scale(.8);transform-origin:left bottom;margin-right:-8px;margin-top:-7px}

@media (hover:hover) and (pointer:fine){
  .player-hand .koma.selectable:hover{transform:translateY(-5px);filter:drop-shadow(0 7px 4px rgba(42,28,15,.34))}
  .player-hand .koma.selectable.selected:hover{transform:translateY(-8px)}
}

/* Mobile summary buttons are hidden on desktop */
.mobile-role-summary{display:none}

/* Generic buttons and modals */
.primary-btn,.danger-btn,.secondary-btn{
  min-height:36px;
  padding:6px 13px;
  border:1px solid #765b43;
  cursor:pointer;
  font-weight:700;
}
.primary-btn{background:#5c422d;color:#fff}
.danger-btn{background:#8b3429;color:#fff}
.secondary-btn{background:#d3b48b;color:#2c1b10;border-color:#6f5137;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 1px rgba(55,34,18,.12)}
.primary-btn:hover,.danger-btn:hover,.secondary-btn:hover{filter:brightness(1.05)}

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:14px;
  overflow:auto;
  background:rgba(25,18,13,.58);
}
.modal.hidden{display:none!important}
.modal-card{
  width:min(92vw,520px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  margin:0;
  padding:15px;
  border:1px solid #9e856a;
  background:#f9f2e7;
  box-shadow:0 14px 36px rgba(28,19,13,.35);
}
.modal-card.wide{width:min(94vw,760px)}
.modal-card h2{margin:0 0 10px;font-size:20px}
.match-start-card{width:min(92vw,440px);text-align:center}
.match-start-game-title{margin:0 0 12px;font-size:24px;line-height:1.2;letter-spacing:.05em}
.match-start-settings{display:grid;grid-template-columns:1fr;gap:7px;margin:0 0 10px}
.match-start-setting{display:grid;gap:5px;padding:9px;border:1px solid #c9b49b;background:#fffaf2;text-align:left}
.match-start-setting>span{color:#6b5847;font-size:11px;font-weight:700}
.match-start-setting select{width:100%;min-height:38px;padding:6px 8px;border:1px solid #a68c70;background:#fff;color:#39291e;font:inherit;font-weight:700}
.match-start-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 10px}
.match-start-summary>div{display:grid;gap:3px;padding:8px;border:1px solid #c9b49b;background:#fffaf2}
.match-start-summary span{color:#6b5847;font-size:11px}
.match-start-summary strong{font-size:14px}
.match-start-starter-wrap{display:grid;gap:5px;margin:0 0 12px;padding:13px 10px;border:1px solid #a68c70;background:#eadcc8}
.match-start-starter{font-size:25px;line-height:1.2;letter-spacing:.04em}
.match-start-starter.player-starter{color:#355624}
.match-start-starter.cpu-starter{color:#7a281f}
.match-start-btn{width:100%;min-height:42px;font-size:15px}
.match-start-mode-help{width:100%;min-height:38px;margin:0 0 7px}
.match-start-cancel{width:100%;min-height:38px;margin-top:7px}
.mode-help-card>.primary-btn{width:100%}
.decision-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;margin-bottom:9px}
.decision-role-card{min-width:0;padding:7px;border:1px solid #b89d7f;background:#fffaf2}
.decision-role-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.decision-role-head strong{font-size:14px}
.decision-role-head span{color:#6e4425;font-size:12px;font-weight:700;white-space:nowrap}
.decision-role-pieces{min-height:64px;display:flex;flex-wrap:wrap;align-content:flex-end;align-items:flex-end;justify-content:center;gap:4px 5px;padding:4px;overflow:hidden}
.decision-role-pieces .role-piece-slot{flex:0 0 auto;min-width:30px;min-height:56px;gap:1px}
.decision-role-pieces .role-piece-slot .koma{transform:none!important;margin:0!important}
.decision-role-pieces .role-piece-slot .koma.tiny{--w:24px;--h:30px}
.decision-role-pieces .role-piece-slot .koma.slim{--w:27px;--h:33px}
.decision-role-pieces .role-piece-slot .koma.small{--w:29px;--h:35px}
.decision-role-pieces .role-piece-slot .koma.medium{--w:31px;--h:37px}
.decision-role-pieces .role-piece-slot .koma.large{--w:34px;--h:40px}
.decision-role-pieces .role-piece-slot .koma.royal{--w:36px;--h:42px}
.decision-role-pieces .role-generic-koma{width:30px;height:36px;font-size:16px}
.decision-role-pieces .role-choice-duo{gap:3px}
.decision-role-pieces .role-choice-duo .koma+.koma{margin-left:0!important}
.decision-role-pieces .role-piece-qty{font-size:10px}
.decision-score{margin:8px 0 12px;padding:8px;border:1px solid #d1bea8;background:#fffaf2;text-align:center;font-weight:700}
.decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.decision-actions.advance-only{grid-template-columns:1fr}

/* Promotion cards wrap tightly and share the same piece renderer */
.promotion-choices{
  width:min(100%,520px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:8px 8px;
  margin:7px auto 0;
  padding:2px;
}
.promotion-option{
  flex:0 0 78px;
  width:78px;
  min-width:78px;
  height:116px;
  display:grid;
  grid-template-rows:minmax(0,1fr) 18px;
  align-items:end;
  justify-items:center;
  gap:1px;
}
.promotion-option .koma{align-self:end;margin:0}
.promotion-value{
  height:18px;
  margin:0;
  color:#5d432d;
  font-size:10px;
  line-height:18px;
  text-align:center;
}

.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.help-grid section{padding:8px;border:1px solid #d0bea7;background:#fffaf2}
.help-grid h3{margin:0 0 4px;font-size:13px}
.help-grid p{margin:0;font-size:11px;line-height:1.5}
.help-card>.primary-btn{width:100%}

.role-detail-card{width:min(92vw,680px)}
.role-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #d0bea8}
.role-detail-head h2{margin:0}
.role-detail-points{margin-top:4px;color:#704622;font-size:17px;font-weight:700}
.role-detail-pieces{min-height:110px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:12px;padding:10px;border:1px solid #c9b395;background:#efe2cf}
.role-piece-slot{min-width:54px;min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.role-piece-slot .koma{transform:scale(.84);transform-origin:bottom center}
.role-piece-qty{font-size:15px}
.role-piece-label{color:#69584a;font-size:10px}
.role-generic-koma{width:54px;height:64px;display:grid;place-items:center;clip-path:polygon(50% 0%,91% 16%,100% 100%,0 100%,9% 16%);background:linear-gradient(100deg,#c99a61,#e2bd85 50%,#b98048);font-size:28px;font-weight:700;box-shadow:0 3px 5px rgba(40,25,12,.24)}
.role-choice-duo{display:flex;align-items:flex-end;justify-content:center;gap:6px}.role-choice-duo .koma+.koma{margin-left:0}
.role-detail-text{margin:9px 0 0;text-align:center;font-size:13px}

.mobile-modal-section{margin-top:10px}
.mobile-modal-section h3{margin:0 0 6px;font-size:13px}
.mobile-captured-list{height:auto!important;min-height:70px;max-height:none!important;overflow:visible!important}
.mobile-role-modal-list{height:auto!important;max-height:none!important;overflow:visible!important}

.result-card{width:min(94vw,760px)}
.round-result-message{margin:0 0 10px;padding:12px 12px;text-align:center;border:1px solid #c3a987;background:#eadcc8}
.result-outcome-title{display:block;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:.08em}
.result-outcome-detail{display:block;margin-top:5px;font-size:12px;font-weight:700}
.round-result-message.result-win{border:2px solid #55733a;background:linear-gradient(180deg,#edf4e5 0%,#dce9cf 100%);box-shadow:inset 0 0 0 1px #f8fff2}
.round-result-message.result-win .result-outcome-title{color:#355624;font-size:30px}
.round-result-message.result-loss{border:2px solid #8b3429;background:linear-gradient(180deg,#f5e5e1 0%,#ead2cd 100%);box-shadow:inset 0 0 0 1px #fff7f5}
.round-result-message.result-loss .result-outcome-title{color:#7a281f;font-size:30px}
.round-result-message.result-draw{border:2px solid #7d6c58;background:linear-gradient(180deg,#f1ece4 0%,#e3d8ca 100%)}
.round-result-message.result-draw .result-outcome-title{color:#554739;font-size:27px}
.round-result-message.result-neutral{border-color:#c3a987;background:#eadcc8}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.result-side{min-width:0;padding:9px;border:1px solid #bda78b;background:#fffaf2}
.result-side-head{display:flex;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px solid #d2c1ac;font-size:14px}
.result-side-head span{font-size:17px;font-weight:700}
.result-breakdown{margin:7px 0;color:#5d4c3d;font-size:11px;line-height:1.45}
.result-roles{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.result-role{display:flex;justify-content:space-between;gap:6px;padding:5px 6px;border:1px solid #d2c1ac;background:#f5eadb;font-size:11px}
.result-role.empty{grid-column:1/-1;justify-content:center;color:var(--muted)}
.result-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px}
.result-actions.final-actions{grid-template-columns:1fr 1fr}
.result-next{width:100%;margin-top:0}

.touch-card-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:150;
  max-width:min(88vw,520px);
  padding:8px 11px;
  transform:translate(-50%,18px);
  border:1px solid #9c836b;
  background:rgba(37,27,20,.94);
  color:#fff8ec;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
  font-size:12px;
}
.touch-card-toast.show{opacity:1;transform:translate(-50%,0)}

/* Medium desktop widths keep the header tall while reducing only horizontal pressure */
@media (min-width:861px) and (max-width:1180px){
  .topbar{gap:7px;padding-left:8px;padding-right:8px}
  .match-control-strip{gap:4px}
  .game-settings{gap:3px}
  .setting-summary-button{min-height:34px;padding-inline:7px;gap:5px}
  .setting-summary-button span{font-size:9px}
  .setting-summary-button strong{font-size:10px}
  .scoreboard{grid-template-columns:repeat(3,minmax(50px,1fr))}
  .match-meta{grid-template-columns:minmax(54px,1fr)}
  .scoreboard>div,.match-meta>div{padding-inline:5px}
  .header-actions .secondary-btn{padding-inline:8px;font-size:12px}
}

/* Short desktop screens */
@media (min-width:861px) and (max-height:790px){
  .topbar{padding-top:10px;padding-bottom:10px}
  .center-zone{grid-template-rows:minmax(0,1fr) 116px}
  .field-wrap{grid-template-rows:28px 94px minmax(0,1fr)}
  .stock-pile{width:52px;height:62px}
  .stock-card{width:47px;height:58px}
  .draw-zone{height:80px}.draw-card-slot{height:76px}
  .field{gap:7px;padding-top:7px;padding-bottom:41px}
  .cpu-panel,.player-panel{grid-template-rows:auto 128px auto minmax(0,1fr)}
  .role-chip{padding:3px 5px}
  .role-name{font-size:11px}.role-points{font-size:10px}.role-requirement,.role-status{font-size:10px}
}

/* Wide screens use the extra room for the pieces, not empty margins */
@media (min-width:1600px){
  .board-grid{gap:9px;padding:9px}
  .capture-list{gap:6px}
  .capture-list .koma.tiny{--w:32px;--h:40px}
  .capture-list .koma.slim{--w:37px;--h:46px}
  .capture-list .koma.small{--w:41px;--h:50px}
  .capture-list .koma.medium{--w:45px;--h:54px}
  .capture-list .koma.large{--w:49px;--h:58px}
  .capture-list .koma.royal{--w:54px;--h:63px}
  .role-name{font-size:13px}.role-points{font-size:12px}.role-requirement,.role-status{font-size:11px}
}

#mobileRolesModal{z-index:120}
#roleDetailModal{z-index:140}

/* Mobile */
@media (max-width:860px) and (orientation:portrait){
  body{overflow:hidden}
  .app-shell{height:100dvh;min-height:0}
  .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px 8px;
    padding:6px 7px 7px;
  }
  .topbar h1{font-size:18px}
  .header-actions{grid-column:2;grid-row:1}
  .header-actions .secondary-btn{min-height:30px;padding:4px 7px;font-size:10px}
  .header-actions .sound-toggle{min-width:48px;padding-inline:6px}
  .match-control-strip{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px;
  }
  .game-settings{
    grid-column:1/-1;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }
  .setting-summary-button{
    width:100%;
    min-height:34px;
    justify-content:center;
    padding:3px 6px;
    gap:5px;
  }
  .setting-summary-button span{font-size:9px}
  .setting-summary-button strong{font-size:11px}
  .scoreboard{grid-column:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-width:0}
  .match-meta{grid-column:2;grid-template-columns:minmax(54px,1fr);gap:4px}
  .scoreboard>div,.match-meta>div{padding:3px 4px}
  .scoreboard span,.match-meta span{font-size:8px}
  .scoreboard strong,.match-meta strong{font-size:13px}

  .board-grid{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) 112px;
    gap:5px;
    padding:5px 5px 13px;
    overflow:hidden;
  }
  .cpu-panel,.player-panel{display:none}
  .center-zone{
    grid-column:1;
    grid-row:1;
    grid-template-rows:minmax(0,1fr) 108px;
    gap:5px;
    min-height:0;
  }
  .field-wrap{
    grid-template-rows:27px 78px minmax(0,1fr);
    border-width:5px;
  }
  .field-head{padding:2px 5px;font-size:10px}
  .message{width:calc(100% - 46px);font-size:9px}
  .stock-strip{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);padding:2px 5px}
  .stock-center{gap:2px}
  .stock-title{font-size:10px}
  .stock-pile{width:43px;height:52px}
  .stock-card{width:39px;height:48px}
  .stock-card-3{transform:translate(4px,4px)}
  .draw-zone{height:66px;overflow:hidden}.draw-card-slot{width:64px;height:64px;overflow:hidden}
  .draw-card-slot .koma{transform:none!important;margin:0!important}
  .draw-card-slot .koma.tiny{--w:30px;--h:38px}
  .draw-card-slot .koma.slim{--w:33px;--h:41px}
  .draw-card-slot .koma.small{--w:35px;--h:43px}
  .draw-card-slot .koma.medium{--w:37px;--h:45px}
  .draw-card-slot .koma.large{--w:40px;--h:48px}
  .draw-card-slot .koma.royal{--w:42px;--h:50px}
  .field{gap:5px;padding:5px 6px 39px}
  .field-action-dock{bottom:10px}
  .draw-action-large{min-width:146px;min-height:33px;padding:4px 11px;font-size:12px}
  .player-row{padding:6px 5px 8px}
  .hand-label{font-size:10px}
  .hand-current-score>span{font-size:9px}
  .hand-current-score strong{font-size:13px}
  .player-hand{gap:3px;padding:8px 0 4px}
  .player-hand .koma.tiny{--w:30px;--h:38px}
  .player-hand .koma.slim{--w:32px;--h:41px}
  .player-hand .koma.small{--w:34px;--h:44px}
  .player-hand .koma.medium{--w:36px;--h:47px}
  .player-hand .koma.large{--w:38px;--h:50px}
  .player-hand .koma.royal{--w:40px;--h:53px}

  .field>.koma.tiny{--w:38px;--h:48px}
  .field>.koma.slim{--w:42px;--h:52px}
  .field>.koma.small{--w:45px;--h:55px}
  .field>.koma.medium{--w:48px;--h:58px}
  .field>.koma.large{--w:51px;--h:62px}
  .field>.koma.royal{--w:55px;--h:66px}

  .mobile-role-summary{
    grid-column:1;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    min-width:0;
    min-height:0;
  }
  .mobile-capture-side{
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:30px minmax(0,1fr);
    overflow:hidden;
    border:1px solid #8f765e;
    background:#f7efe4;
  }
  .mobile-capture-head{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    padding:3px 5px;
    border-bottom:1px solid #c7b39a;
  }
  .mobile-capture-head strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
  }
  .mobile-role-open{
    flex:0 0 auto;
    min-height:23px;
    padding:2px 6px;
    border:1px solid #8b6d50;
    background:#6b4a30;
    color:#fff8ed;
    font:inherit;
    font-size:9px;
    font-weight:700;
  }
  .mobile-inline-captured{
    width:100%;
    height:100%;
    min-height:0;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:flex-end!important;
    align-content:stretch!important;
    justify-content:flex-start!important;
    gap:4px!important;
    padding:5px 5px 11px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin;
    touch-action:pan-x;
  }
  .mobile-inline-captured .koma{flex:0 0 auto!important;transform:none!important;margin:0!important}
  .mobile-inline-captured .koma.tiny{--w:28px;--h:35px}
  .mobile-inline-captured .koma.slim{--w:31px;--h:39px}
  .mobile-inline-captured .koma.small{--w:34px;--h:42px}
  .mobile-inline-captured .koma.medium{--w:37px;--h:45px}
  .mobile-inline-captured .koma.large{--w:40px;--h:48px}
  .mobile-inline-captured .koma.royal{--w:43px;--h:51px}

  .modal{
    display:grid;
    place-items:center;
    padding:10px;
    overflow:hidden;
  }
  .modal.hidden{display:none!important}
  .modal-card,.modal-card.wide,.mobile-roles-card{
    width:min(96vw,680px);
    max-height:calc(100dvh - 20px);
    margin:0;
    overflow:auto;
  }
  .mobile-roles-card{width:min(96vw,620px)}
  .mobile-role-modal-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    gap:5px!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .mobile-role-modal-list .role-chip{padding:6px}
  #mobileRolesModal{z-index:120}
  #roleDetailModal{z-index:140}

  .promotion-choices{width:min(100%,246px);gap:5px}
  .promotion-option{flex-basis:74px;width:74px;min-width:74px;height:106px}
  .promotion-option .koma{transform:scale(.9);transform-origin:bottom center}

  .decision-roles{grid-template-columns:1fr}
  .help-grid{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr}
}

@media (max-width:520px) and (orientation:portrait){
  .topbar{padding-inline:5px}
  .header-actions .secondary-btn{padding-inline:6px}
  .scoreboard strong,.match-meta strong{font-size:12px}
  .center-zone{grid-template-rows:minmax(0,1fr) 106px}
  .mobile-role-modal-list{grid-template-columns:1fr!important}
  .role-detail-head{align-items:center}
  .role-detail-head .secondary-btn{padding-inline:8px}
  .promotion-choices{width:min(100%,230px);gap:4px}
  .promotion-option{flex-basis:72px;width:72px;min-width:72px;height:103px}
  .match-start-settings{grid-template-columns:1fr}
  .result-actions.final-actions{grid-template-columns:1fr}
  .result-roles{grid-template-columns:1fr}
}


.match-start-intro{
  margin:0 0 11px;
  color:#5f4c3b;
  font-size:13px;
  line-height:1.65;
  text-align:left;
}
.match-start-help-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:0 0 7px;
}
.match-start-help-actions .secondary-btn{min-height:38px}
.quick-guide-card{text-align:left}
.quick-guide-steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.quick-guide-steps section{
  padding:10px;
  border:1px solid #d1bda4;
  background:#fffaf2;
}
.quick-guide-steps strong{
  display:block;
  margin-bottom:4px;
  color:#3f2d20;
  font-size:14px;
}
.quick-guide-steps p{
  margin:0;
  color:#5f4c3b;
  font-size:13px;
  line-height:1.55;
}
.quick-guide-note{
  margin:10px 0;
  padding:9px 10px;
  background:#eadcc8;
  color:#493629;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.quick-guide-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.quick-guide-actions .primary-btn,.quick-guide-actions .secondary-btn{width:100%;min-height:40px}

@media (max-width:560px) and (orientation:portrait){
  .match-start-intro{font-size:12px;line-height:1.55}
  .quick-guide-steps{grid-template-columns:1fr}
  .quick-guide-actions{grid-template-columns:1fr}
}

/* v0.4.26 */
@media (max-width:860px) and (orientation:portrait){
  .header-actions .secondary-btn{
    min-height:34px;
    padding:5px 8px;
  }
  .setting-summary-button{
    min-height:38px;
    padding-block:5px;
  }
  .draw-action-large{
    min-width:154px;
    min-height:40px;
    padding:6px 13px;
    font-size:13px;
  }
  .player-hand{
    gap:4px;
    padding-bottom:5px;
  }
  .player-hand .koma.tiny{--w:31px;--h:39px}
  .player-hand .koma.slim{--w:33px;--h:42px}
  .player-hand .koma.small{--w:35px;--h:45px}
  .player-hand .koma.medium{--w:37px;--h:48px}
  .player-hand .koma.large{--w:39px;--h:51px}
  .player-hand .koma.royal{--w:41px;--h:54px}
  .koma.selectable{
    -webkit-tap-highlight-color:transparent;
  }
  .player-hand .koma.selectable:active,
  .field>.koma.selectable:active{
    filter:drop-shadow(0 5px 4px rgba(42,28,15,.4));
  }
  .mobile-capture-side{
    grid-template-rows:34px minmax(0,1fr);
  }
  .mobile-role-open{
    min-height:30px;
    padding:4px 8px;
    font-size:10px;
  }
  .modal-card .primary-btn,
  .modal-card .danger-btn,
  .modal-card .secondary-btn{
    min-height:44px;
  }
  .match-start-setting select{
    min-height:44px;
    font-size:16px;
  }
  .match-start-help-actions .secondary-btn,
  .quick-guide-actions .primary-btn,
  .quick-guide-actions .secondary-btn{
    min-height:44px;
  }
}

@media (max-width:360px) and (orientation:portrait), (max-width:860px) and (max-height:700px) and (orientation:portrait){
  .header-actions .secondary-btn{min-height:32px;padding-block:4px}
  .setting-summary-button{min-height:36px;padding-block:4px}
  .draw-action-large{min-height:38px}
  .mobile-capture-side{grid-template-rows:32px minmax(0,1fr)}
  .mobile-role-open{min-height:28px;padding-block:3px}
  .player-hand{gap:3px}
  .player-hand .koma.tiny{--w:30px;--h:38px}
  .player-hand .koma.slim{--w:32px;--h:41px}
  .player-hand .koma.small{--w:34px;--h:44px}
  .player-hand .koma.medium{--w:36px;--h:47px}
  .player-hand .koma.large{--w:38px;--h:50px}
  .player-hand .koma.royal{--w:40px;--h:53px}
}

/* v0.5.18: smartphone landscape uses the PC-style 3-column board with page scrolling. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  html,body{
    height:auto;
    min-height:100%;
  }
  body{
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .app-shell{
    height:auto;
    min-height:720px;
    overflow:visible;
    grid-template-rows:auto minmax(620px,1fr);
  }
  .board-grid{
    min-height:620px;
    height:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:minmax(620px,auto);
    gap:7px;
    padding:7px;
    overflow:visible;
  }
  .cpu-panel,.player-panel{
    display:grid;
    grid-template-rows:auto 144px auto minmax(0,1fr);
  }
  .center-zone{
    grid-column:auto;
    grid-row:auto;
    grid-template-rows:minmax(0,1fr) 128px;
    gap:6px;
    min-height:0;
    overflow:hidden;
  }
  .mobile-role-summary{display:none}
  .field-wrap{
    grid-template-rows:30px 108px minmax(0,1fr);
    border-width:7px;
  }
  .field-head{padding:4px 8px;font-size:11px}
  .message{width:calc(100% - 96px);font-size:11px}
  .stock-strip{
    grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);
    padding:5px 10px 4px;
  }
  .stock-title{font-size:12px}
  .stock-pile{width:58px;height:70px}
  .stock-card{left:2px;width:53px;height:65px}
  .stock-card-3{transform:translate(5px,5px)}
  .draw-zone{height:92px;overflow:visible}
  .draw-card-slot{width:86px;height:88px;overflow:visible}
  .draw-card-slot .koma{transform:scale(.88)!important}
  .field{gap:7px;padding:8px 9px 44px}
  .field-action-dock{bottom:15px}
  .draw-action-large{min-width:154px;min-height:40px;font-size:13px}
  .player-row{padding:6px 8px 10px}
  .hand-label{font-size:11px}
  .hand-current-score>span{font-size:10px}
  .hand-current-score strong{font-size:15px}
  .player-hand{gap:4px;padding:3px 0 8px}
}

/* v0.5.23: overflow safety across narrow, short and dense layouts. */
body{min-width:0}
button,select{max-width:100%}
.topbar>*{min-width:0}
.topbar h1{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.setting-summary-button strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
.modal-card,.role-chip,.result-side,.quick-guide-steps section{overflow-wrap:anywhere}
.result-role{min-width:0}
.result-role>*{min-width:0}

/* Never silently cut long captured/role collections on desktop. */
.capture-list{overflow:auto;overscroll-behavior:contain}
.role-list{overflow:auto;overscroll-behavior:contain}
.capture-list.dense{gap:3px}
.capture-list.dense .koma.tiny{--w:25px;--h:32px}
.capture-list.dense .koma.slim{--w:28px;--h:35px}
.capture-list.dense .koma.small{--w:31px;--h:38px}
.capture-list.dense .koma.medium{--w:34px;--h:41px}
.capture-list.dense .koma.large{--w:37px;--h:44px}
.capture-list.dense .koma.royal{--w:40px;--h:47px}
.capture-list.dense .koma{transform:none;margin:0}
.capture-list.very-dense .koma.tiny{--w:21px;--h:27px}
.capture-list.very-dense .koma.slim{--w:24px;--h:30px}
.capture-list.very-dense .koma.small{--w:26px;--h:32px}
.capture-list.very-dense .koma.medium{--w:28px;--h:34px}
.capture-list.very-dense .koma.large{--w:30px;--h:36px}
.capture-list.very-dense .koma.royal{--w:33px;--h:39px}
.capture-list.very-dense .koma{transform:none;margin:0}
.capture-list.ultra-dense{gap:1px}
.capture-list.ultra-dense .koma.tiny{--w:18px;--h:23px}
.capture-list.ultra-dense .koma.slim{--w:20px;--h:25px}
.capture-list.ultra-dense .koma.small{--w:22px;--h:27px}
.capture-list.ultra-dense .koma.medium{--w:24px;--h:29px}
.capture-list.ultra-dense .koma.large{--w:26px;--h:31px}
.capture-list.ultra-dense .koma.royal{--w:28px;--h:33px}
.capture-list.ultra-dense .koma{transform:none;margin:0}

/* Hands stay reachable if a narrow viewport cannot show every card at once. */
.player-hand{
  justify-content:safe center;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* Field pieces shrink progressively as the field gets crowded. */
@media (min-width:861px){
  .field.field-dense{gap:5px}
  .field.field-dense>.koma.tiny{--w:36px;--h:45px}
  .field.field-dense>.koma.slim{--w:40px;--h:49px}
  .field.field-dense>.koma.small{--w:43px;--h:52px}
  .field.field-dense>.koma.medium{--w:46px;--h:55px}
  .field.field-dense>.koma.large{--w:49px;--h:58px}
  .field.field-dense>.koma.royal{--w:52px;--h:62px}
  .field.field-very-dense{gap:4px}
  .field.field-very-dense>.koma.tiny{--w:30px;--h:38px}
  .field.field-very-dense>.koma.slim{--w:34px;--h:42px}
  .field.field-very-dense>.koma.small{--w:36px;--h:44px}
  .field.field-very-dense>.koma.medium{--w:38px;--h:46px}
  .field.field-very-dense>.koma.large{--w:41px;--h:49px}
  .field.field-very-dense>.koma.royal{--w:44px;--h:52px}
  .field.field-packed{gap:3px}
  .field.field-packed>.koma.tiny{--w:25px;--h:32px}
  .field.field-packed>.koma.slim{--w:28px;--h:35px}
  .field.field-packed>.koma.small{--w:30px;--h:37px}
  .field.field-packed>.koma.medium{--w:32px;--h:39px}
  .field.field-packed>.koma.large{--w:34px;--h:41px}
  .field.field-packed>.koma.royal{--w:36px;--h:44px}
}

@media (max-width:860px) and (orientation:portrait){
  .field.field-dense{gap:4px}
  .field.field-dense>.koma.tiny{--w:32px;--h:40px}
  .field.field-dense>.koma.slim{--w:35px;--h:43px}
  .field.field-dense>.koma.small{--w:37px;--h:45px}
  .field.field-dense>.koma.medium{--w:39px;--h:47px}
  .field.field-dense>.koma.large{--w:42px;--h:50px}
  .field.field-dense>.koma.royal{--w:45px;--h:53px}
  .field.field-very-dense{gap:3px;padding-inline:4px}
  .field.field-very-dense>.koma.tiny{--w:27px;--h:34px}
  .field.field-very-dense>.koma.slim{--w:30px;--h:37px}
  .field.field-very-dense>.koma.small{--w:32px;--h:39px}
  .field.field-very-dense>.koma.medium{--w:34px;--h:41px}
  .field.field-very-dense>.koma.large{--w:36px;--h:43px}
  .field.field-very-dense>.koma.royal{--w:39px;--h:46px}
  .field.field-packed{gap:2px;padding-inline:3px}
  .field.field-packed>.koma.tiny{--w:23px;--h:29px}
  .field.field-packed>.koma.slim{--w:26px;--h:32px}
  .field.field-packed>.koma.small{--w:28px;--h:34px}
  .field.field-packed>.koma.medium{--w:30px;--h:36px}
  .field.field-packed>.koma.large{--w:32px;--h:38px}
  .field.field-packed>.koma.royal{--w:34px;--h:41px}
  .mobile-inline-captured{overflow-x:auto!important;overflow-y:hidden!important}
}

/* Phone landscape: keep the PC-style board, but make every column usable. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .topbar{gap:5px;padding:6px 7px}
  .topbar h1{font-size:17px;letter-spacing:.06em}
  .match-control-strip{gap:3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .game-settings{gap:3px}
  .setting-summary-button{min-height:32px;padding:3px 6px;gap:4px}
  .setting-summary-button span{font-size:8px}
  .setting-summary-button strong{font-size:10px}
  .scoreboard{grid-template-columns:repeat(3,minmax(42px,1fr));gap:3px}
  .match-meta{grid-template-columns:minmax(44px,1fr)}
  .scoreboard>div,.match-meta>div{padding:3px 4px}
  .scoreboard span,.match-meta span{font-size:8px}
  .scoreboard strong,.match-meta strong{font-size:12px}
  .header-actions .secondary-btn{min-height:32px;padding:4px 7px;font-size:10px}
  .player-hand{justify-content:flex-start;gap:2px;padding-inline:2px}
  .player-hand .koma.tiny{--w:22px;--h:28px}
  .player-hand .koma.slim{--w:24px;--h:30px}
  .player-hand .koma.small{--w:26px;--h:32px}
  .player-hand .koma.medium{--w:28px;--h:34px}
  .player-hand .koma.large{--w:30px;--h:36px}
  .player-hand .koma.royal{--w:32px;--h:38px}
  .field.field-dense{gap:3px}
  .field.field-dense>.koma.tiny{--w:27px;--h:34px}
  .field.field-dense>.koma.slim{--w:30px;--h:37px}
  .field.field-dense>.koma.small{--w:32px;--h:39px}
  .field.field-dense>.koma.medium{--w:34px;--h:41px}
  .field.field-dense>.koma.large{--w:36px;--h:43px}
  .field.field-dense>.koma.royal{--w:39px;--h:46px}
  .field.field-very-dense{gap:2px}
  .field.field-very-dense>.koma.tiny{--w:23px;--h:29px}
  .field.field-very-dense>.koma.slim{--w:26px;--h:32px}
  .field.field-very-dense>.koma.small{--w:28px;--h:34px}
  .field.field-very-dense>.koma.medium{--w:30px;--h:36px}
  .field.field-very-dense>.koma.large{--w:32px;--h:38px}
  .field.field-very-dense>.koma.royal{--w:34px;--h:41px}
  .field.field-packed{gap:2px;padding-inline:3px}
  .field.field-packed>.koma.tiny{--w:20px;--h:25px}
  .field.field-packed>.koma.slim{--w:22px;--h:27px}
  .field.field-packed>.koma.small{--w:24px;--h:29px}
  .field.field-packed>.koma.medium{--w:26px;--h:31px}
  .field.field-packed>.koma.large{--w:28px;--h:33px}
  .field.field-packed>.koma.royal{--w:30px;--h:36px}
}

/* Very narrow portrait devices remain operable instead of overflowing horizontally. */
@media (max-width:359px) and (orientation:portrait){
  .topbar{padding-inline:4px}
  .topbar h1{font-size:16px}
  .board-grid{padding-inline:3px}
  .player-hand{justify-content:flex-start;gap:2px}
  .player-hand .koma.tiny{--w:27px;--h:34px}
  .player-hand .koma.slim{--w:29px;--h:37px}
  .player-hand .koma.small{--w:31px;--h:40px}
  .player-hand .koma.medium{--w:33px;--h:42px}
  .player-hand .koma.large{--w:35px;--h:45px}
  .player-hand .koma.royal{--w:37px;--h:48px}
  .modal{padding:6px}
  .modal-card,.modal-card.wide,.mobile-roles-card{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:11px}
}

/* Fallback glyph text scales with the actual piece width. */
.koma-glyph-fallback{font-size:clamp(11px,calc(var(--w) * .45),24px);line-height:1}


/* v0.5.25: game-styled selectors on every device. */
.match-start-setting{
  border-color:#94704d;
  background:linear-gradient(145deg,#f3dfbd 0%,#e7c792 52%,#d5ad72 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 -2px 0 rgba(91,53,24,.12);
}
.match-start-setting>span{
  color:#553720;
  letter-spacing:.06em;
}
.match-start-setting select{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-height:42px;
  padding:7px 10px;
  border:1px solid #56371f;
  border-radius:2px;
  outline:0;
  background:linear-gradient(180deg,#6b4a30 0%,#563821 100%);
  color:#fff8ed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(30,17,8,.24),0 1px 2px rgba(53,33,18,.18);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-align-last:center;
  letter-spacing:.04em;
  cursor:pointer;
}
.match-start-setting select:focus{
  border-color:#2f1c0f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(30,17,8,.24),0 0 0 2px rgba(106,69,40,.28);
}
.match-start-setting select option{
  background:#f8f1e7;
  color:#2d1b10;
}

/* Phone piece-tip safety. */
@media (max-width:860px) and (orientation:portrait){
  .field{padding-top:7px}
  .koma.selected{transform:translateY(-4px)}
  .koma.target{transform:translateY(-4px)}
  .match-start-setting select{min-height:44px;font-size:16px}
}

/* v0.5.28: selected hand piece floats on phones without ever clipping its tip. */
@media (max-width:860px) and (orientation:portrait){
  /* Max current mobile piece is royal: 54px + the renderer's 4px shell.
     80px hand box with 14px top / 4px bottom padding leaves enough reserved
     space for the 7px selection lift while keeping the whole piece inside. */
  .board-grid{
    grid-template-rows:minmax(0,1fr) 132px;
  }
  .player-row{
    min-height:132px;
    padding:7px 5px 8px;
  }
  .player-row-content{
    min-height:84px;
  }
  .player-hand{
    height:84px;
    min-height:84px;
    padding:12px 0 10px;
    align-items:flex-end;
    overflow-y:hidden;
  }
  .player-hand .koma.selected{
    transform:translateY(-7px);
    filter:drop-shadow(0 7px 4px rgba(42,28,15,.34));
  }
  .player-hand .koma.selected .koma-shape{
    filter:drop-shadow(0 0 4px white) drop-shadow(0 0 4px #4b3423);
  }
  .player-hand .koma.selectable:active:not(.selected){
    transform:none;
  }
}

/* v0.5.30: reserve real vertical space for the hand instead of clipping tall/selected pieces. */
@media (min-width:861px){
  .center-zone{
    grid-template-rows:minmax(0,1fr) 150px;
  }
  .player-row{
    min-height:150px;
    padding:7px 8px 11px;
  }
  .player-row-content{
    min-height:108px;
  }
  .player-hand{
    min-height:108px;
    padding:12px 0 10px;
    align-items:flex-end;
  }
}

/* Short desktop windows still reserve enough room for the tallest selected piece. */
@media (min-width:861px) and (max-height:790px){
  .center-zone{
    grid-template-rows:minmax(0,1fr) 144px;
  }
  .player-row{
    min-height:144px;
    padding-top:6px;
    padding-bottom:9px;
  }
  .player-row-content,
  .player-hand{
    min-height:102px;
  }
  .player-hand{
    padding-top:10px;
    padding-bottom:8px;
  }
}

/* Portrait phones: the hand owns its own height; the lower capture summary stays compact. */
@media (max-width:860px) and (orientation:portrait){
  .board-grid{
    grid-template-rows:minmax(0,1fr) 112px;
  }
  .center-zone{
    grid-template-rows:minmax(0,1fr) 132px;
  }
  .player-row{
    min-height:132px;
    padding:6px 5px 8px;
  }
  .player-row-content{
    min-height:92px;
  }
  .player-hand{
    height:92px;
    min-height:92px;
    padding:14px 0 16px;
    align-items:flex-end;
    overflow-y:hidden;
  }
}

/* v0.5.31: intrinsic hand height. Keep the field on the flexible track and
   let the hand reserve exactly the vertical space needed for the tallest
   current piece, selection lift and visible top/bottom breathing room. */
.center-zone{
  grid-template-rows:minmax(0,1fr) auto;
}
.player-row{
  height:auto;
  min-height:0;
  overflow:hidden;
}
.player-row-content{
  height:auto;
  min-height:0;
  overflow:visible;
}
.player-hand{
  height:auto;
  min-height:112px;
  padding:14px 0 12px;
  align-items:flex-end;
}

/* Short desktop windows use the same intrinsic hand row instead of forcing
   a smaller fixed track that can clip a selected royal piece. */
@media (min-width:861px) and (max-height:790px){
  .center-zone{grid-template-rows:minmax(0,1fr) auto}
  .player-row{min-height:0}
  .player-hand{min-height:112px;padding:14px 0 12px}
}

/* Portrait phones: the second board row belongs to the mobile captured-piece
   summary, not to the hand. The hand stays inside center-zone and sizes itself. */
@media (max-width:860px) and (orientation:portrait){
  .board-grid{grid-template-rows:minmax(0,1fr) 112px}
  .center-zone{grid-template-rows:minmax(0,1fr) auto}
  .player-row{
    min-height:0;
    padding:7px 5px 10px;
  }
  .player-row-content{min-height:0;height:auto}
  .player-hand{
    height:auto;
    min-height:90px;
    padding:15px 0 12px;
    align-items:flex-end;
  }
}

@media (max-width:520px) and (orientation:portrait){
  .center-zone{grid-template-rows:minmax(0,1fr) auto}
}

/* Landscape phones keep the existing PC-style three-column board. Only the
   hand row becomes intrinsic so its smaller landscape pieces cannot clip. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .center-zone{grid-template-rows:minmax(0,1fr) auto}
  .player-row{min-height:0;padding:6px 8px 9px}
  .player-row-content{min-height:0;height:auto}
  .player-hand{
    height:auto;
    min-height:68px;
    padding:11px 0 9px;
    align-items:flex-end;
  }
}

/* v0.5.32: mode selection uses persistent game-styled buttons instead of a browser select. */
.mode-setting{min-width:0}
.mode-choice-group{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  width:100%;
}
.mode-choice-btn{
  min-width:0;
  min-height:42px;
  padding:7px 6px;
  border:1px solid #7b5939;
  border-radius:3px;
  background:linear-gradient(180deg,#f7e8cc 0%,#e8c999 100%);
  color:#4a2f1b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(83,49,23,.10),0 1px 2px rgba(55,35,20,.15);
  font:inherit;
  font-size:14px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:normal;
  overflow-wrap:anywhere;
  transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease;
}
.mode-choice-btn:hover{
  background:linear-gradient(180deg,#f3dfbd 0%,#dfba82 100%);
}
.mode-choice-btn:focus-visible{
  outline:2px solid #2f1c0f;
  outline-offset:2px;
}
.mode-choice-btn.is-selected{
  border-color:#3d2716;
  background:linear-gradient(180deg,#6b4a30 0%,#4f321d 100%);
  color:#fff8ed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(25,13,6,.26),0 2px 4px rgba(53,33,18,.22);
  transform:translateY(-1px);
}
@media (max-width:860px) and (orientation:portrait){
  .mode-choice-group{gap:5px}
  .mode-choice-btn{min-height:44px;padding:7px 4px;font-size:13px}
}
@media (max-width:359px) and (orientation:portrait){
  .mode-choice-btn{font-size:12px;padding-inline:3px}
}


/* v0.5.33: mode and round count are stacked game-styled button groups. */
.rounds-setting{min-width:0}
.round-choice-group{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  width:100%;
}
.round-choice-btn{
  min-width:0;
  min-height:42px;
  padding:7px 6px;
  border:1px solid #7b5939;
  border-radius:3px;
  background:linear-gradient(180deg,#f7e8cc 0%,#e8c999 100%);
  color:#4a2f1b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(83,49,23,.10),0 1px 2px rgba(55,35,20,.15);
  font:inherit;
  font-size:14px;
  font-weight:800;
  line-height:1.15;
  cursor:pointer;
  transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease;
}
.round-choice-btn:hover{background:linear-gradient(180deg,#f3dfbd 0%,#dfba82 100%)}
.round-choice-btn:focus-visible{outline:2px solid #2f1c0f;outline-offset:2px}
.round-choice-btn.is-selected{
  border-color:#3d2716;
  background:linear-gradient(180deg,#6b4a30 0%,#4f321d 100%);
  color:#fff8ed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(25,13,6,.26),0 2px 4px rgba(53,33,18,.22);
  transform:translateY(-1px);
}
@media (max-width:860px) and (orientation:portrait){
  .round-choice-group{gap:5px}
  .round-choice-btn{min-height:44px;padding:7px 4px;font-size:13px}
}
@media (max-width:359px) and (orientation:portrait){
  .round-choice-btn{font-size:12px;padding-inline:3px}
}


/* v0.5.34: simplify match setup hierarchy and normalize inner spacing. */
.match-start-settings{
  gap:10px;
  margin-bottom:10px;
}
.match-start-setting{
  gap:8px;
  padding:10px;
  border:1px solid #b7a28b;
  background:#f2ece4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.match-start-setting>span{
  color:#554536;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.06em;
}
.mode-choice-group,
.round-choice-group{
  gap:7px;
}
.mode-choice-btn,
.round-choice-btn{
  border-color:#8a623e;
  background:linear-gradient(180deg,#e6c18b 0%,#cfa064 100%);
  color:#3d2818;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(83,49,23,.11),0 1px 1px rgba(55,35,20,.12);
}
.mode-choice-btn:hover,
.round-choice-btn:hover{
  background:linear-gradient(180deg,#edcfa0 0%,#d7aa70 100%);
}
.mode-choice-btn.is-selected,
.round-choice-btn.is-selected{
  border-color:#3b2718;
  background:linear-gradient(180deg,#5b402c 0%,#3f2a1b 100%);
  color:#fff9ef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 0 rgba(20,10,5,.26),0 2px 3px rgba(45,28,15,.20);
}

@media (max-width:860px) and (orientation:portrait){
  .match-start-setting{padding:10px;gap:8px}
  .mode-choice-group,.round-choice-group{gap:6px}
}


/* v0.5.35: simplify setup header and integrate mode help into the basic rules. */
.match-start-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}
.match-start-game-title{
  margin:0;
  text-align:left;
}
.match-start-help-actions{
  display:block;
  margin:0;
  flex:0 0 auto;
}
.match-start-help-actions .secondary-btn{
  min-height:36px;
  padding:7px 12px;
}
.match-start-setting,
.match-start-summary>div{
  background:transparent;
  box-shadow:none;
}
.quick-guide-modes{
  margin-top:10px;
}
.quick-guide-modes>h3{
  margin:0 0 7px;
  font-size:14px;
}
.quick-guide-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.quick-guide-mode-grid section{
  min-width:0;
  padding:8px;
  border:1px solid #d0bea7;
  background:#fffaf2;
}
.quick-guide-mode-grid strong{display:block;margin-bottom:4px}
.quick-guide-mode-grid p{margin:0;color:#5f4c3b;font-size:12px;line-height:1.55}
@media (max-width:860px) and (orientation:portrait){
  .match-start-head{gap:8px}
  .match-start-game-title{font-size:22px}
  .match-start-help-actions .secondary-btn{min-height:40px;padding:7px 10px}
  .quick-guide-mode-grid{grid-template-columns:1fr}
}


/* v0.5.36: align the setup title/rules control and add a concise game-reading intro. */
.match-start-head{
  min-height:40px;
}
.match-start-game-title{
  display:flex;
  align-items:center;
  min-height:40px;
  line-height:1;
}
.match-start-help-actions{
  display:flex;
  align-items:center;
  min-height:40px;
}
.match-start-help-actions .secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  min-height:40px;
  line-height:1;
}
.quick-guide-about{
  margin:0 0 10px;
  padding:9px 10px;
  border:1px solid #d0bea7;
  background:#fffaf2;
}
.quick-guide-about strong{
  display:block;
  margin:0 0 4px;
}
.quick-guide-about p{
  margin:0;
  color:#5f4c3b;
  font-size:13px;
  line-height:1.55;
}
@media (max-width:860px) and (orientation:portrait){
  .match-start-head,
  .match-start-game-title,
  .match-start-help-actions{min-height:40px}
  .match-start-help-actions .secondary-btn{height:40px;min-height:40px}
}
\n\n/* v0.5.38: align setup title and basic-rules text by the text centers themselves. */\n.match-start-head{\n  display:grid;\n  grid-template-columns:minmax(0,1fr) auto;\n  align-items:center;\n}\n.match-start-game-title,\n.match-start-help-actions,\n.match-start-help-actions .secondary-btn{\n  height:40px;\n  min-height:40px;\n}\n.match-start-game-title,\n.match-start-help-actions .secondary-btn{\n  position:relative;\n  display:block;\n  margin:0;\n  line-height:1;\n}\n.match-start-game-title>span,\n.match-start-help-actions .secondary-btn>span{\n  position:absolute;\n  top:50%;\n  line-height:1;\n  white-space:nowrap;\n}\n.match-start-game-title>span{\n  left:0;\n  transform:translateY(-50%);\n}\n.match-start-help-actions{\n  display:block;\n  margin:0;\n}\n.match-start-help-actions .secondary-btn{\n  -webkit-appearance:none;\n  appearance:none;\n  min-width:max-content;\n  padding:0 12px;\n}\n.match-start-help-actions .secondary-btn>span{\n  left:50%;\n  transform:translate(-50%,-50%);\n}\n@media (max-width:860px) and (orientation:portrait){\n  .match-start-head{gap:8px}\n  .match-start-game-title,\n  .match-start-help-actions,\n  .match-start-help-actions .secondary-btn{height:40px;min-height:40px}\n}\n
/* v0.5.40: tablet landscape layout. Keep role text inside its cards instead of
   forcing the desktop two-column role grid into medium-width touch screens. */
@media (min-width:861px) and (max-width:1440px) and (orientation:landscape) and (any-pointer:coarse){
  .topbar{
    gap:8px;
    padding:9px 10px;
  }
  .topbar h1{font-size:20px}
  .match-control-strip{gap:5px}
  .setting-summary-button{min-height:35px;padding-inline:8px;gap:5px}
  .scoreboard{grid-template-columns:repeat(3,minmax(54px,1fr))}
  .match-meta{grid-template-columns:minmax(56px,1fr)}
  .scoreboard>div,.match-meta>div{padding-inline:6px}
  .header-actions .secondary-btn{padding-inline:8px}

  .board-grid{
    grid-template-columns:minmax(220px,.92fr) minmax(0,1.35fr) minmax(220px,.92fr);
    gap:6px;
    padding:6px;
  }
  .capture-panel{padding:6px}
  .cpu-panel,.player-panel{
    grid-template-rows:auto 126px auto minmax(0,1fr);
  }
  .capture-list{gap:4px;padding:4px 2px 7px}

  .capture-panel>.role-list{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-rows:max-content;
    gap:4px;
    padding-right:3px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .role-chip{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    padding:5px 6px;
  }
  .role-top{
    grid-template-columns:minmax(0,1fr) max-content;
    align-items:start;
    gap:6px;
  }
  .role-name{
    min-width:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.15;
    font-size:12px;
  }
  .role-points{
    align-self:start;
    font-size:11px;
  }
  .role-requirement,.role-status{
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.15;
    font-size:10px;
  }
  .progress-title{margin-top:5px}

  .center-zone,.field-wrap,.field,.player-row,.player-row-content,.player-hand{
    min-width:0;
  }
  .message{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}