:root {
  color-scheme:light;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color:#2c221e;
  background:#201c18;
  font-synthesis:none;
  --paper:#f6f1e8;
  --accent:#8c3d2a;
  --outline:#a38a61;
  --cream:#d9c7a5
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:300px
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  touch-action:manipulation
}
button:disabled {
  cursor:default;
  opacity:.5
}
button:focus-visible,input:focus-visible {
  outline:3px solid #efbd70;
  outline-offset:3px
}
button {
  color:inherit
}
img {
  max-width:100%
}
.shell {
  position:relative;
  margin:auto;
  width:100%;
  max-width:1000px;
  min-height:100svh;
  padding:24px clamp(18px,4vw,48px) 40px;
  background:linear-gradient(#21160d88,#21160d99),url('./assets/vertical_base.jpg') center/cover;
  isolation:isolate
}
.mast {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px
}
.title-logo {
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  filter:brightness(0) invert(1)
}
.tagline {
  width:72%;
  max-width:580px;
  filter:brightness(0) invert(1)
}
.version {
  display:block;
  margin:24px auto 0;
  text-align:center;
  color:#ffffffbb;
  font-size:10px;
  letter-spacing:.05em
}
h1,h2,h3,p {
  margin-top:0
}
.primary,.paper,.toolbar {
  border:1px solid #593223;
  border-radius:5px;
  background:var(--accent);
  color:var(--paper);
  font-weight:700;
  min-height:42px;
  padding:10px 16px
}
.primary:hover:not(:disabled) {
  background:#a14c33
}
.paper {
  background:#f6f1e8ed;
  color:#2c221e;
  border-color:#b7a58c
}
.wide {
  width:100%;
  display:block
}
.menu .mast {
  margin-top:clamp(20px,7vh,80px)
}
.menu-fields {
  width:min(100%,520px);
  margin:clamp(40px,9vh,100px) auto 50px
}
.mode-label {
  text-align:center;
  color:white;
  font-weight:700;
  font-size:20px;
  margin-bottom:26px
}
.name-field {
  display:grid;
  gap:8px;
  color:white;
  font-size:15px;
  font-weight:700
}
.name-field input {
  width:100%;
  border:1px solid #bfa16e;
  background:#faf3e7;
  border-radius:5px;
  padding:12px 16px;
  color:#34251c
}
.menu-fields>.primary {
  margin-top:28px
}
.menu-guides {
  display:flex;
  gap:14px;
  margin-top:24px
}
.menu-guides button {
  flex:1
}
.lobby .mast {
  margin-top:12px
}
.lobby-fields {
  max-width:750px;
  margin:clamp(30px,5vh,65px) auto 0
}
.lobby h1,.lobby h2 {
  color:white;
  font-size:clamp(16px,2.5vw,24px);
  font-weight:800
}
.lobby h1 {
  text-align:center;
  margin-bottom:20px
}
.field {
  display:flex;
  align-items:stretch;
  margin:12px 0;
  border:1.5px solid var(--outline);
  border-radius:7px;
  overflow:hidden;
  background:#312319db;
  min-height:46px
}
.field>span {
  display:flex;
  align-items:center;
  flex:0 0 43%;
  padding:9px 12px;
  color:#fff;
  font-size:clamp(12px,1.9vw,19px);
  font-weight:800;
  white-space:nowrap
}
.segmented {
  display:flex;
  flex:1;
  min-width:0
}
.segmented button {
  border:0;
  border-left:1px solid #85745d;
  background:#d4c2a0;
  color:#796d5b;
  font-size:clamp(14px,2.3vw,22px);
  flex:1;
  min-width:0;
  padding:8px 3px
}
.segmented button.chosen {
  background:#4b251b;
  color:white;
  font-weight:800;
  font-size:clamp(15px,2.4vw,23px)
}
.participants-label {
  margin:24px 12px 15px
}
.participants {
  width:80%;
  margin-left:auto
}
.participant {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:46px;
  padding:10px 15px;
  background:#fff1bc;
  border-radius:5px;
  margin:10px 0;
  font-size:clamp(13px,2.1vw,20px)
}
.participant small {
  color:#86775e;
  font-size:.7em
}
.cpu-buttons {
  display:grid;
  gap:10px;
  margin-top:12px
}
.cpu-buttons button {
  font-size:clamp(13px,2vw,20px);
  font-weight:500
}
.lobby-secondary {
  width:70%;
  margin:30px auto 0
}
.lobby-secondary button {
  width:100%;
  font-size:clamp(14px,2vw,20px);
  font-weight:500
}
.lobby-start {
  width:70%;
  margin:30px auto 28px;
  display:grid;
  gap:12px
}
.lobby-start button:nth-child(2) {
  font-size:14px;
  font-weight:500
}
.lobby-fields>.paper {
  width:70%;
  margin:auto
}
.board {
  --small-card:clamp(32px,7vw,58px);
  --player-height:clamp(145px,30vw,235px);
  --action-height:clamp(26px,6vw,46px);
  --action-step:calc((var(--player-height) - var(--action-height) - 8px) / 3);
  max-width:850px;
  padding:12px clamp(10px,2vw,24px) 30px;
  background:linear-gradient(#21160d11,#21160d22),url('./assets/vertical_base.jpg') center/cover;
  container-type:inline-size
}
.board-top {
  position:relative;
  height:clamp(79px,19vw,145px)
}
.board-top .mast {
  position:absolute;
  left:0;
  top:12%;
  width:61%;
  height:70%;
  justify-content:center
}
.board-top .title-logo {
  width:100%
}
.board-controls {
  position:absolute;
  right:17%;
  top:0;
  display:flex;
  gap:7px
}
.toolbar {
  min-height:0;
  padding:4px 12px;
  background:#ffffffe6;
  color:#000;
  font-size:clamp(11px,2.3vw,20px);
  border:0;
  border-radius:4px;
  min-width:58px
}
.toolbar.exit {
  background:#00cc00;
  color:#fff
}
.round-state {
  position:absolute;
  right:18%;
  bottom:10%;
  display:grid;
  gap:5px;
  font-size:clamp(9px,1.8vw,15px)
}
.round-state>span {
  display:flex;
  align-items:center;
  gap:3px
}
.round-state i {
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f6f1e8
}
.round-state i.lit {
  background:#a63c2b
}
.deck {
  position:absolute;
  right:0;
  top:0;
  width:15%;
  height:95%;
  background:linear-gradient(#241b1a77,#241b1a77),url('./assets/card_back.png') center/cover;
  border-radius:0 0 12px 12px;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px solid #413222
}
.deck small {
  font-size:clamp(10px,2vw,17px)
}
.deck strong {
  font-size:clamp(24px,6vw,50px);
  font-weight:500
}
.market {
  position:relative;
  padding:0;
  margin-bottom:10px
}
.market-row {
  display:flex;
  gap:clamp(2px,.6vw,7px);
  width:100%;
  align-items:start
}
.card {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  flex:1 1 0;
  min-width:0;
  width:100%;
  aspect-ratio:144/200;
  border:1px solid #3b3128;
  border-radius:clamp(6px,1.5vw,15px);
  padding:4% 2% 3%;
  background:#fff;
  overflow:hidden;
  color:#000;
  text-align:center
}
.market .card {
  padding:1% .4% .6%
}
.card img {
  width:79%;
  height:56%;
  object-fit:contain;
  user-select:none;
  pointer-events:none
}
.rank {
  align-self:start;
  font-size:clamp(16px,3.7vw,31px);
  font-weight:500;
  line-height:1;
  color:var(--rank);
  padding-left:5%;
  font-family:Georgia,serif
}
.goods-name {
  width:100%;
  font-size:clamp(7px,1.6vw,14px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4
}
.kind-mark {
  position:absolute;
  left:0;
  top:var(--mark-y);
  height:12.5%;
  width:4.1667%;
  background:var(--marker)
}
.card.muted {
  opacity:.75
}
.card.empty {
  background:transparent;
  border-color:transparent;
  visibility:hidden
}
.card.concealed {
  visibility:hidden
}
.card.back {
  background:url('./assets/card_back.png') center/cover;
  padding:0
}
.market button:hover {
  box-shadow:0 0 0 2px #d3a758
}
.market button:active {
  transform:translateY(-3px)
}
.turn-notice {
  min-height:24px;
  color:white;
  text-shadow:0 1px 3px #000;
  font-size:clamp(11px,1.7vw,15px);
  padding:3px 2px 7px
}
.player-stack {
  display:grid;
  gap:clamp(14px,3vw,25px)
}
.player {
  position:relative;
  min-width:0;
  height:var(--player-height);
  margin:0 2%;
  background:#f4ecdfeb;
  border:1px solid #968879;
  border-radius:4px;
  padding:clamp(16px,3vw,24px) 10px 7px
}
.player-name {
  position:absolute;
  top:-9px;
  left:-2.2%;
  margin:0;
  width:55%;
  padding:3px 8px;
  background:#fffefa;
  border:1px solid #9e9283;
  border-radius:3px;
  font-size:clamp(12px,2.4vw,21px);
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.player.turn .player-name {
  background:#ffe9b4;
  font-weight:800
}
.player-zones {
  height:100%;
  display:grid;
  grid-template-columns:clamp(36px,9%,65px) minmax(0,1fr) 34%;
  gap:6px
}
.stat-labels {
  display:grid;
  grid-template-rows:17px 1fr 17px 1fr
}
.stat-labels h3 {
  margin:0;
  font-size:clamp(9px,1.8vw,16px);
  font-weight:700
}
.stat-labels strong {
  font-size:clamp(20px,4.5vw,36px);
  font-weight:600;
  line-height:1.1
}
.stat-labels small {
  font-size:clamp(8px,1.6vw,14px);
  font-weight:500
}
.card-zones {
  display:grid;
  grid-template-rows:1fr 1fr;
  align-items:start;
  min-width:0;
  gap:4px
}
.fan {
  position:relative;
  height:calc(var(--small-card)*200/144);
  min-width:0;
  max-height:100%
}
.fan-slot {
  position:absolute;
  top:0;
  width:var(--small-card)
}
.card.small {
  width:var(--small-card);
  flex:none;
  border-radius:4px;
  max-height:100%;
  padding:4% 2% 2%
}
.card.small .rank {
  font-size:clamp(10px,2.3vw,18px)
}
.card.small .goods-name {
  font-size:clamp(5px,1vw,9px)
}
.bonus-zone {
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:end;
  justify-content:end
}
.special-remaining {
  align-self:end;
  display:grid;
  gap:3px;
  width:67%;
  margin-top:-4px;
  margin-bottom:auto
}
.special-remaining span {
  text-align:center;
  border:1px solid #958e82;
  background:#d4e9f3;
  font-size:clamp(8px,1.5vw,13px);
  line-height:1.3
}
.special-remaining span+span {
  background:#dcebd0
}
.special-remaining .used {
  background:#bbb;
  color:#666
}
.titles {
  align-self:center;
  white-space:nowrap;
  font-size:clamp(7px,1.3vw,12px);
  line-height:1.4;
  margin:2px 0 3px
}
.title {
  font-weight:400;
  color:#695e51
}
.title>span {
  display:inline-block;
  width:1.2em;
  white-space:pre
}
.title.earned {
  font-weight:800;
  color:#30251c
}
.title.invalid {
  text-decoration:line-through;
  color:#a29b90
}
.tray-label {
  position:absolute;
  left:-40%;
  bottom:13%;
  font-size:clamp(9px,1.8vw,16px);
  font-weight:700
}
.tray {
  width:100%;
  height:clamp(32px,7.5vw,62px);
  border:1px solid #968a7a;
  border-radius:4px;
  position:relative
}
.chip {
  position:absolute;
  display:block;
  width:clamp(7px,1.6vw,13px);
  height:clamp(6px,1.3vw,11px);
  transform:rotate(var(--tilt,0deg));
  box-shadow:0 1px 1px #0003
}
.chip.green {
  background:#00c847;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)
}
.chip.purple {
  background:#d900c9
}
.chip.blue {
  background:#168bc4;
  border-radius:50%
}
.action-stack {
  position:absolute;
  right:-2.5%;
  top:-8px;
  z-index:4;
  pointer-events:none
}
.action-button {
  position:absolute;
  right:0;
  top:calc(var(--slot)*var(--action-step));
  height:var(--action-height);
  padding:0 10px;
  white-space:nowrap;
  border:1px solid #312313;
  border-radius:6px;
  background:#d6ba86;
  color:#1c130a;
  font-size:clamp(17px,3.8vw,30px);
  font-weight:800;
  pointer-events:auto;
  box-shadow:0 1px 1px #0002
}
.card-flyer {
  position:fixed;
  z-index:70;
  pointer-events:none;
  transform-origin:top left
}
.card-flyer>.card {
  width:100%;
  height:100%;
  padding:3px
}
.card-flyer .rank {
  font-size:clamp(12px,3vw,27px)
}
.card-flyer .goods-name {
  font-size:9px
}
.card-flyer button {
  pointer-events:none
}
.chip-flyer {
  position:fixed;
  z-index:90;
  pointer-events:none;
  width:12px;
  height:10px
}
.shade {
  position:fixed;
  inset:0;
  z-index:100;
  background:#09070599;
  display:grid;
  place-items:center;
  padding:18px;
  overflow-y:auto
}
.dialog {
  width:min(100%,780px);
  max-height:calc(100svh - 36px);
  overflow:auto;
  padding:clamp(16px,3vw,28px);
  border:1px solid #756048;
  border-radius:12px;
  background:#f6f1e8f5;
  box-shadow:0 18px 60px #0007
}
.dialog h2 {
  text-align:center;
  font-size:clamp(20px,4vw,29px);
  margin:0 0 22px
}
.dialog p {
  line-height:1.75
}
.dialog .wide {
  margin-top:20px
}
.dialog .field>span {
  font-size:clamp(11px,1.9vw,18px);
  flex-basis:49%;
  padding:9px
}
.dialog .segmented button {
  font-size:clamp(12px,2vw,19px)
}
.dialog-actions {
  display:flex;
  gap:10px
}
.dialog-actions button {
  flex:1
}
.dialog-note {
  font-size:13px;
  color:#786955
}
.nominees {
  display:grid;
  gap:9px
}
.nominees button {
  background:#e8dfd0;
  color:#35291f;
  padding:12px;
  text-align:left;
  border:1px solid #a8957a;
  border-radius:6px
}
.nominees button.chosen {
  background:var(--accent);
  color:white
}
.nominees b {
  display:block;
  font-size:17px
}
.nominees small {
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.5
}
.guide-dialog {
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.guide-scroll {
  overflow:auto;
  min-height:0;
  overscroll-behavior:contain;
  padding:0 3px
}
.guide-dialog>.wide {
  flex:none;
  margin-top:14px
}
.guide-section h3 {
  font-size:19px;
  margin:25px 0 12px;
  color:#82432f
}
.guide-panel {
  border:1px solid #d7c5ae;
  border-radius:7px;
  padding:14px 16px;
  background:#fffaf0;
  margin:10px 0;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere
}
.guide-panel p {
  margin:0;
  font-size:14px;
  line-height:1.85
}
.guide-panel .guide-note {
  font-size:12px;
  margin-top:5px;
  color:#75634f
}
.table-wrap {
  overflow-x:auto;
  margin-top:12px
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.65
}
td,th {
  border:1px solid #c9b89d;
  padding:9px;
  text-align:left
}
th {
  background:#e5d5bd
}
td {
  background:#fffdf7
}
td:first-child {
  white-space:nowrap
}
.slideshow {
  background:#e7d9c5;
  border-radius:6px;
  overflow:hidden
}
.slideshow>img {
  display:block;
  width:100%;
  aspect-ratio:1.8;
  object-fit:contain;
  background:#fff
}
.slide-bottom {
  position:relative;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:5px 12px;
  font-size:12px
}
.slide-controls {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px
}
.slide-controls button {
  min-height:30px;
  min-width:37px;
  padding:3px 9px;
  font-size:15px
}
.ceremony-panel {
  position:absolute;
  left:2%;
  right:2%;
  top:clamp(60px,13vw,110px);
  z-index:30;
  padding:clamp(13px,3vw,26px);
  border:1px solid #412117;
  border-radius:8px;
  background:#71362bea;
  color:white;
  box-shadow:0 10px 25px #0002
}
.ceremony-panel h2 {
  text-align:center;
  font-size:clamp(16px,3.2vw,25px);
  margin:0 0 18px
}
.ceremony-panel>p {
  font-size:clamp(11px,2vw,17px);
  text-align:center;
  line-height:1.65
}
.ceremony-panel .wide {
  margin-top:20px
}
.award-lines {
  display:grid;
  gap:8px;
  margin:12px 0
}
.award-lines>div {
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
  font-size:clamp(10px,1.9vw,16px);
  transition:opacity .25s
}
.award-lines .gone {
  opacity:.2
}
.award-lines small {
  font-size:.8em
}
.award-lines b {
  font-weight:600
}
.score-list {
  display:grid;
  gap:10px;
  margin:20px 0
}
.score-row {
  display:grid;
  grid-template-columns:2.6em minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  font-size:clamp(11px,2.1vw,18px);
  min-height:1.6em
}
.score-name {
  min-width:0;
  overflow-wrap:anywhere
}
.score-figure {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  font-size:clamp(12px,2.6vw,22px)
}
.score-figure span {
  display:inline-block
}
.previous,.sum {
  font-size:.9em
}
.winner {
  margin-top:20px;
  font-weight:700
}
.rank-caption {
  font-size:12px!important;
  color:#efcfac
}
.board .version {
  margin-top:28px
}
@media(min-width:900px) {
  .board {
    max-width:700px;
    --small-card:50px;
    --player-height:205px;
    --action-height:39px
  }
  .board-top {
    height:125px
  }
  .goods-name {
    font-size:12px
  }
  .rank {
    font-size:28px
  }
  .player-name {
    font-size:19px
  }
  .titles {
    font-size:11px
  }
  .special-remaining span {
    font-size:12px
  }
  .action-button {
    font-size:27px
  }
  .board .ceremony-panel {
    top:90px
  }
  .board .score-row {
    font-size:16px
  }
  .board .score-figure {
    font-size:20px
  }
}
@media(max-width:430px) {
  .shell {
    padding-inline:14px
  }
  .menu .mast {
    gap:18px
  }
  .field>span {
    flex-basis:45%;
    padding:8px;
    font-size:12px
  }
  .field {
    min-height:39px
  }
  .participants {
    width:84%
  }
  .participant {
    padding:10px;
    font-size:13px;
    min-height:40px
  }
  .lobby-fields {
    margin-top:34px
  }
  .lobby-start,.lobby-secondary,.lobby-fields>.paper {
    width:84%
  }
  .board {
    padding:9px 8px 25px;
    --small-card:32px;
    --player-height:140px;
    --action-height:27px
  }
  .board-top {
    height:78px
  }
  .toolbar {
    min-width:48px;
    padding:3px 8px;
    font-size:12px
  }
  .board-controls {
    gap:4px
  }
  .round-state {
    font-size:9px;
    gap:3px
  }
  .round-state i {
    width:6px;
    height:6px
  }
  .player-name {
    font-size:12px
  }
  .player {
    padding:16px 6px 6px
  }
  .player-zones {
    grid-template-columns:35px minmax(0,1fr) 32%;
    gap:4px
  }
  .titles {
    font-size:7px
  }
  .action-button {
    font-size:18px;
    padding-inline:9px
  }
  .board .title-logo {
    width:100%
  }
  .ceremony-panel {
    padding:12px;
    top:62px
  }
  .award-lines>div {
    gap:4px;
    font-size:10px
  }
  .score-row {
    font-size:10px;
    gap:4px;
    grid-template-columns:2.3em minmax(0,1fr) auto
  }
  .score-figure {
    font-size:12px
  }
  .ceremony-panel .wide {
    min-height:34px;
    padding:7px
  }
  .dialog .field {
    flex-wrap:wrap
  }
  .dialog .field>span {
    flex:0 0 100%;
    padding:8px 10px
  }
  .dialog .segmented {
    min-height:37px
  }
  .dialog .segmented button:first-child {
    border-left:0
  }
  .guide-panel {
    padding:12px
  }
  .guide-panel p {
    font-size:13px
  }
  .guide-section h3 {
    font-size:17px
  }
  .turn-notice {
    font-size:10px
  }
  .player-stack {
    gap:15px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}