/* shippu-hanten.css — 疾風飯店（ゲーム固有。LB は arcade-leaderboard.css） */

.shippu-game {
  width: 100%;
  max-width: 28.75rem;
  margin-inline: auto;
  box-sizing: border-box;
  font-family: var(--ui);
  color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

.shippu-game *,
.shippu-game *::before,
.shippu-game *::after {
  box-sizing: border-box;
}

.shippu-game button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

.shippu-game img {
  display: block;
  max-width: 100%;
  height: auto;
}

.shippu-game__layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 28.75rem;
  margin-inline: auto;
}

.shippu-game--embed .rmn {
  height: min(62dvh, 640px);
  max-height: 640px;
}

@media (max-width: 1023px) {
  .shippu-game--embed .rmn {
    height: min(58dvh, 560px);
    max-height: 560px;
  }
}

@media (max-width: 639px) {
  .shippu-game--embed .rmn {
    height: min(54dvh, 500px);
    max-height: 500px;
  }
}

.shippu-game{
  --red:#A81B12; --red-dk:#6B0F09; --red-lt:#C93327;
  --gold:#E7BE5A; --gold-dk:#A9832C;
  --cream:#F4E9D2; --ink:#241A16; --jade:#2E7A63;
  --raimon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M2 18V6h12v8H6v-4h4' fill='none' stroke='%23E7BE5A' stroke-width='2'/%3E%3C/svg%3E");
  --disp:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --ui:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}

.shippu-game .rmn {position:relative;width:100%;height:min(100dvh,860px);max-height:860px;
  display:flex;flex-direction:column;background:linear-gradient(180deg,#2A1512 0%,#1C0E0C 100%);
  box-shadow:0 0 0 3px var(--gold-dk),0 24px 60px rgba(0,0,0,.55);overflow:hidden;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}

.shippu-game .band {height:10px;flex:none;background:var(--raimon) repeat-x center/20px 20px;background-color:var(--red-dk);opacity:.9}

.shippu-game .hud {flex:none;padding:8px 12px 7px;background:linear-gradient(180deg,#3A1A15,#241110);border-bottom:1px solid rgba(231,190,90,.35)}

.shippu-game .hud__top {display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;min-width:0}

.shippu-game .badge-stage {display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:2px 8px 2px 3px;border-radius:99px;
  background:linear-gradient(180deg,#4A2118,#2A1210);
  box-shadow:inset 0 0 0 1px var(--gold-dk),0 1px 3px rgba(0,0,0,.5)}

.shippu-game .badge-stage__ico {width:17px;height:17px;flex:none;
  filter:drop-shadow(0 0 5px rgba(231,190,90,.5))}

.shippu-game .badge-stage b {font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--gold)}

.shippu-game .badge-stage.is-up {animation:stageUp .8s ease-out}

@keyframes stageUp{
  0%{transform:scale(1)}
  25%{transform:scale(1.18);box-shadow:inset 0 0 0 1px var(--gold),0 0 16px rgba(231,190,90,.8)}
  100%{transform:scale(1)}}

.shippu-game .miss {display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 1px rgba(226,80,60,.35)}

.shippu-game .miss__lab {font-size:11px;font-weight:700;letter-spacing:.06em;color:rgba(244,233,210,.62);white-space:nowrap}

.shippu-game .miss i {position:relative;width:16px;height:16px;border-radius:50%;flex:none;
  border:1.5px solid rgba(226,80,60,.45);display:inline-block;background:rgba(0,0,0,.3)}

.shippu-game .miss i::before, .shippu-game .miss i::after {content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;
  margin:-1px 0 0 -4.5px;background:#E2503C;border-radius:1px;opacity:0;transition:opacity .12s ease}

.shippu-game .miss i::before {transform:rotate(45deg)}

.shippu-game .miss i::after {transform:rotate(-45deg)}

.shippu-game .miss i.on {background:#E2503C;border-color:#FF8A6B;box-shadow:0 0 9px rgba(226,80,60,.85)}

.shippu-game .miss i.on::before, .shippu-game .miss i.on::after {background:#2A0A06;opacity:1}

.shippu-game .miss.is-hit {animation:missHit .55s ease-out}

@keyframes missHit{
  0%{transform:translateX(0)}
  15%{transform:translateX(-4px)}
  30%{transform:translateX(4px)}
  45%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}
  100%{transform:translateX(0)}}

.shippu-game .miss.is-danger {animation:missDanger .8s ease-in-out infinite}

@keyframes missDanger{0%,100%{box-shadow:inset 0 0 0 1px rgba(226,80,60,.35)}
  50%{box-shadow:inset 0 0 0 1px rgba(226,80,60,.9),0 0 12px rgba(226,80,60,.45)}}

.shippu-game .miss i.heal {animation:healPop .8s ease-out}

.shippu-game .hud__combo {position:relative;margin-left:4px;overflow:hidden;flex:none;white-space:nowrap;
  font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--ink);background:linear-gradient(180deg,#F6E2A8,var(--gold));
  border-radius:3px;padding:2px 7px 4px;opacity:0;transform:scale(.8);
  transition:opacity .15s ease,transform .15s ease}

.shippu-game .hud__combo:not(.is-on) {width:0;min-width:0;margin:0;padding:0;border:0;opacity:0;pointer-events:none}

.shippu-game .hud__combo i {position:absolute;left:0;bottom:0;height:2.5px;width:100%;
  background:var(--red);display:block}

.shippu-game .hud__combo.is-low i {background:#8E1B10}

.shippu-game .hud__combo.is-low {animation:comboLow .45s ease-in-out infinite}

@keyframes comboLow{0%,100%{filter:brightness(1)}50%{filter:brightness(.78)}}

.shippu-game .hud__combo.is-on {opacity:1;transform:scale(1)}

.shippu-game .hud__combo.is-hot {animation:comboPulse .5s ease-out}

@keyframes comboPulse{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

.shippu-game .hud__count {margin-left:auto;font-family:var(--disp);font-size:26px;font-weight:700;line-height:1;flex:none;white-space:nowrap}

.shippu-game .hud__count small {font-size:13px;color:rgba(244,233,210,.6)}

/* 杯数の隣に素のテキストで並べるボーナス（囲みなし） */
.shippu-game .hud__bonus {display:inline-flex;align-items:baseline;gap:2px;margin-left:4px;flex:none;white-space:nowrap;
  color:var(--gold)}

.shippu-game .hud__bonus-lab {font-size:10px;font-weight:700;letter-spacing:.04em}

.shippu-game .hud__bonus b {font-family:var(--disp);font-size:16px;font-weight:700;line-height:1}

.shippu-game .hud__bonus b::before {content:"＋";font-size:11px;margin-right:1px}

.shippu-game .hud__bonus small {font-size:11px;opacity:.75}

.shippu-game .hud__bonus.is-up {animation:bonusPop .5s ease-out}

@keyframes bonusPop{
  0%{transform:scale(1)}
  35%{transform:scale(1.3);text-shadow:0 0 14px rgba(231,190,90,.95)}
  100%{transform:scale(1)}}

.shippu-game .hud__bonus.is-zero {color:rgba(244,233,210,.42)}

.shippu-game .hud__bar {margin-top:6px;height:5px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden}

.shippu-game .hud__bar b {display:block;height:100%;background:linear-gradient(90deg,var(--gold),#F6E2A8)}

.shippu-game .hud__bar.is-low b {background:linear-gradient(90deg,#E2503C,#FF8A6B)}

.shippu-game .hall {flex:none;position:relative;padding:9px 8px 0;
  background:linear-gradient(180deg,rgba(168,27,18,.30),rgba(0,0,0,0)),#20100E}

.shippu-game .lanes {display:flex;gap:5px;align-items:stretch}

.shippu-game .lane {position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#3B2019,#2B1512);border:1px solid rgba(231,190,90,.25);border-bottom:0}

.shippu-game .lane.is-sel {border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

.shippu-game .lane.is-vip {border-color:var(--gold);
  background:linear-gradient(180deg,#5A3A18,#3A2410)}

.shippu-game .lane.is-vip .face {border-color:var(--gold);box-shadow:0 0 10px rgba(231,190,90,.6)}

.shippu-game .lane.is-vip .slip {box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 0 0 1.5px var(--gold-dk)}

.shippu-game .lane.is-vip .slip::before {border-bottom-color:var(--cream)}

.shippu-game .lane.is-vip.is-sel {box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(231,190,90,.4)}

.shippu-game .slip__hd.is-vip {background:linear-gradient(180deg,#F6E2A8,var(--gold));color:var(--ink);letter-spacing:.14em}

.shippu-game .fx {position:absolute;left:-6px;right:-6px;top:22%;z-index:12;pointer-events:none;text-align:center;
  font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.3;
  padding:3px 2px;border-radius:3px;opacity:0;white-space:nowrap}

.shippu-game .fx.ok {color:var(--ink);background:linear-gradient(180deg,#F6E2A8,var(--gold));
  box-shadow:0 2px 0 rgba(0,0,0,.45),0 0 16px rgba(231,190,90,.55)}

.shippu-game .fx.ng {color:var(--cream);background:linear-gradient(180deg,#E2503C,#8E1B10);
  box-shadow:0 2px 0 rgba(0,0,0,.45),0 0 16px rgba(226,80,60,.5)}

.shippu-game .fx.is-on {animation:fxpop .95s ease-out}

@keyframes fxpop{
  0%{opacity:0;transform:translateY(8px) scale(.8)}
  16%{opacity:1;transform:translateY(0) scale(1.08)}
  26%{transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-16px) scale(1)}}

.shippu-game .lane.is-off {display:none}

.shippu-game .seat {flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 4px 6px;width:100%}

.shippu-game .lane.is-vacant .seat {opacity:.22}

.shippu-game .lane.is-hurry .seat {animation:shake .5s ease-in-out infinite}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}

.shippu-game .face {width:100%;aspect-ratio:1;max-width:42px;border-radius:50%;overflow:hidden;
  background:#150B09;border:1px solid rgba(231,190,90,.4);display:grid;place-items:center}

.shippu-game .face svg, .shippu-game .face img {width:100%;height:100%;object-fit:cover}

.shippu-game .wait {width:100%;height:7px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(231,190,90,.25)}

.shippu-game .wait b {display:block;height:100%;width:100%;background:linear-gradient(90deg,#5FBF7A,#8FE0A0)}

.shippu-game .wait.is-warn b {background:linear-gradient(90deg,#E7BE5A,#F6E2A8)}

.shippu-game .wait.is-danger b {background:linear-gradient(90deg,#E2503C,#FF8A6B)}

.shippu-game .slip {position:relative;width:100%;background:var(--cream);color:var(--ink);border-radius:3px;
  padding:0 3px 3px;display:flex;flex-direction:column;gap:2px;min-height:56px;
  box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(36,26,22,.15);margin-top:5px}

.shippu-game .slip::before {content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:5px solid var(--cream)}

.shippu-game .slip__hd {display:block;margin:0 -3px 3px;padding:2px 0 1px;
  background:var(--ink);color:var(--gold);border-radius:3px 3px 0 0;
  font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.18em;text-align:center}

.shippu-game .slip--none {background:rgba(244,233,210,.05);box-shadow:none;min-height:56px}

.shippu-game .slip.is-new {animation:slipIn 1.1s ease-out}

@keyframes slipIn{
  0%{transform:scale(.9) translateY(-4px);box-shadow:0 0 0 3px var(--gold),0 2px 5px rgba(0,0,0,.45)}
  22%{transform:scale(1.04) translateY(0);box-shadow:0 0 0 3px var(--gold),0 0 16px rgba(231,190,90,.8)}
  55%{transform:scale(1);box-shadow:0 0 0 2px var(--gold),0 0 10px rgba(231,190,90,.5)}
  100%{transform:scale(1);box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(36,26,22,.15)}}

.shippu-game .slip--none::before {display:none}

.shippu-game .tag {font-size:11px;line-height:1.3;padding:2px 3px;border-radius:2px;text-align:center;
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.shippu-game .tag--firm {background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;gap:2px}

.shippu-game .tag--firm img {width:15px;height:15px;object-fit:contain}

.shippu-game .tag--soup {border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;gap:2px}

.shippu-game .tag--soup img {width:14px;height:14px;object-fit:contain}

.shippu-game .tag--top {background:rgba(36,26,22,.08);border:1px dashed rgba(36,26,22,.45);font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:2px}

.shippu-game .tag--top i {width:7px;height:7px;border-radius:50%;flex:none}

.shippu-game .tag--top img {width:14px;height:14px;object-fit:contain}

.shippu-game .board {flex:none;position:relative;padding:6px 4px 7px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(180deg,#4A2A1E,#3A2016);
  border-top:2px solid rgba(231,190,90,.45);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.35)}

.shippu-game .dish {position:relative;width:52px;height:52px;border-radius:50%;overflow:hidden;
  border:2px solid var(--cream);background:#150B09;display:grid;place-items:center;
  transition:transform .12s ease}

.shippu-game .lane.is-pop .dish {transform:scale(1.14)}

.shippu-game .lane:not(.has-dish) .dish {border-style:dashed;border-color:rgba(244,233,210,.3);background:rgba(0,0,0,.2)}

.shippu-game .dish__soup {position:absolute;inset:3px;border-radius:50%}

.shippu-game .dish__plus {position:relative;font-size:17px;line-height:1;color:rgba(244,233,210,.35)}

.shippu-game .dish__noodle {position:absolute;inset:15px 5px 13px;display:flex;align-items:center;justify-content:center;opacity:0}

.shippu-game .dish__noodle img {width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

.shippu-game .dish__tag {position:absolute;left:0;right:0;top:1px;z-index:2;text-align:center;
  font-size:8px;font-weight:700;line-height:1.7;letter-spacing:.02em;
  color:var(--cream);background:rgba(36,26,22,.85);
  padding:0;opacity:0;white-space:nowrap;overflow:hidden}

.shippu-game .dish__tops {position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:1px;align-items:flex-end}

.shippu-game .dish__tops i {width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5)}

.shippu-game .dish__tops.is-four img {width:13px;height:13px}

.shippu-game .dish__tops img {width:17px;height:17px;object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}

.shippu-game .dish__boil {position:absolute;left:3px;right:3px;bottom:3px;height:4px;border-radius:99px;
  background:rgba(0,0,0,.55);overflow:hidden;display:none}

.shippu-game .dish__boil b {display:block;height:100%;width:0%;background:var(--gold)}

.shippu-game .lane.is-boiling .dish__boil {display:block}

.shippu-game .dishbtn {width:100%;display:grid;place-items:center}

.shippu-game .cap {width:100%;font-size:9px;letter-spacing:.06em;color:rgba(244,233,210,.4);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-height:16px;display:flex;align-items:center;justify-content:center;
  border-radius:3px;border:1px solid transparent;transition:none}

.shippu-game .lane.is-ready .cap {font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.24em;
  color:var(--ink);min-height:22px;
  background:linear-gradient(180deg,#F6E2A8,var(--gold));border-color:var(--gold-dk);
  box-shadow:0 2px 0 rgba(0,0,0,.35);animation:serveGlow 1.1s ease-in-out infinite}

.shippu-game .lane.is-ready .cap:active {transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.35)}

@keyframes serveGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}

.shippu-game .lane.is-ready .dish {border-color:var(--gold);box-shadow:0 0 12px rgba(231,190,90,.45)}

.shippu-game .hall__edge {height:4px;flex:none;background:linear-gradient(90deg,rgba(231,190,90,.5),rgba(231,190,90,.12));
  border-bottom:2px solid rgba(0,0,0,.5)}

.shippu-game .kitchen {flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;padding:5px 8px 6px;
  background:linear-gradient(180deg,#241110,#160A09)}

.shippu-game .keys {flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}

.shippu-game .keys__row {display:flex;gap:5px;min-height:0}

.shippu-game .keys__row--firm {flex:1.1}

.shippu-game .keys__row--soup {flex:1.1}

.shippu-game .keys__row--top {flex:2.2}

.shippu-game .keys__row.is-idle {opacity:.5}

.shippu-game .keys__row.is-idle .keys__lab {filter:grayscale(.5)}

.shippu-game .keys__lab {position:relative;flex:none;width:22px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.18em;
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  border-radius:2px 2px 4px 4px;
  background:linear-gradient(180deg,#F6EBD2 0%,#E8D8B4 55%,#D8C398 100%);
  box-shadow:0 0 0 1px var(--gold-dk),0 2px 4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}

.shippu-game .keys__lab::before {content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:rgba(36,26,22,.35);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}

.shippu-game .keys__lab::after {content:"";position:absolute;left:2px;right:2px;bottom:2px;height:0;
  border-bottom:2px solid rgba(168,27,18,.35)}

.shippu-game .keys__row--firm .keys__lab {padding-top:9px}

.shippu-game .keys__row--soup .keys__lab {padding-top:9px}

.shippu-game .keys__row--top .keys__lab {padding-top:9px}

.shippu-game .keys__grid {flex:1;min-width:0;display:grid;gap:3px;min-height:0}

.shippu-game .keys__grid--firm {grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}

.shippu-game .keys__grid--soup {grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}

.shippu-game .keys__grid--top {grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}

.shippu-game .key {position:relative;min-height:34px;border-radius:4px;border:1px solid rgba(231,190,90,.45);
  background:linear-gradient(180deg,#3E211A,#2A1310);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;padding:0}

.shippu-game .key i {width:2.5rem;height:2.5rem;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.5)}

.shippu-game .key img {width:100%;height:100%;max-width:5.5rem;max-height:5.5rem;object-fit:contain;
  margin:0;padding:2px 3px 10px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

.shippu-game .key__t {position:absolute;left:0;right:0;bottom:3px;
  font-size:9px;font-weight:700;letter-spacing:.01em;line-height:1.25;
  color:var(--cream);background:linear-gradient(180deg,rgba(20,8,7,0),rgba(20,8,7,.82) 40%);
  padding:4px 2px 0;text-shadow:0 1px 2px rgba(0,0,0,.9);
  overflow:hidden;text-overflow:ellipsis}

.shippu-game .key--firm {border-color:rgba(244,233,210,.4);background:linear-gradient(180deg,#4A2A20,#33180F)}

.shippu-game .key--firm small {position:absolute;top:2px;right:3px;z-index:1;
  font-size:9px;font-weight:700;line-height:1;color:var(--ink);
  background:rgba(231,190,90,.92);border-radius:2px;padding:1px 3px;
  text-shadow:none}

.shippu-game .key.is-on {border-color:var(--gold);background:linear-gradient(180deg,var(--red-lt),var(--red))}

.shippu-game .key.is-hit {animation:keyHit .28s ease-out}

.shippu-game .key.is-off {animation:keyOff .28s ease-out}

@keyframes keyOff{
  0%{box-shadow:0 0 0 0 rgba(226,80,60,.9);transform:scale(1)}
  35%{box-shadow:0 0 0 4px rgba(226,80,60,.5);transform:scale(1.05)}
  100%{box-shadow:0 0 0 0 rgba(226,80,60,0);transform:scale(1)}}

@keyframes keyHit{
  0%{box-shadow:0 0 0 0 rgba(231,190,90,.9);transform:scale(1)}
  35%{box-shadow:0 0 0 4px rgba(231,190,90,.55);transform:scale(.94)}
  100%{box-shadow:0 0 0 0 rgba(231,190,90,0);transform:scale(1)}}

.shippu-game .key.is-wait {opacity:.35}

.shippu-game .key:active {transform:translateY(1px)}

.shippu-game .ov {position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,8,7,.93),rgba(20,8,7,.98))}

.shippu-game .ov--title {padding:0;place-items:stretch;background:#140807}

.shippu-game .title {position:absolute;inset:0}

.shippu-game .title__art {position:absolute;inset:0;overflow:hidden}

.shippu-game .title__art img {width:100%;height:100%;object-fit:cover;object-position:center top}

.shippu-game .title__art::after {content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg,rgba(20,8,7,0),rgba(20,8,7,.62) 42%,rgba(20,8,7,.92) 76%,rgba(20,8,7,.97))}

.shippu-game .title__foot {position:absolute;left:0;right:0;bottom:0;padding:0 22px 26px;text-align:center}

.shippu-game .title__lead {font-family:var(--disp);font-size:17px;font-weight:700;line-height:1.65;letter-spacing:.06em;
  color:var(--cream);margin:0 0 16px;
  text-shadow:0 2px 0 rgba(20,8,7,.9),0 0 12px rgba(20,8,7,.95),0 0 26px rgba(20,8,7,.8)}

.shippu-game .title__lead b {color:var(--gold);font-weight:700}

.shippu-game .title__btn {display:block;width:100%;padding:15px 0;border-radius:5px;
  background:linear-gradient(180deg,var(--red-lt),var(--red));border:1px solid var(--gold);
  font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:.3em;color:var(--cream);
  box-shadow:0 4px 0 var(--red-dk),0 8px 18px rgba(0,0,0,.5);text-indent:.3em}

.shippu-game .title__btn:active {transform:translateY(2px);box-shadow:0 2px 0 var(--red-dk)}

.shippu-game .title__sub {display:block;width:100%;margin-top:10px;padding:9px 0;
  font-size:12px;letter-spacing:.16em;color:rgba(244,233,210,.6);
  border:1px solid rgba(231,190,90,.35);border-radius:4px}

.shippu-game .rule__ttl {font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:.14em;
  color:var(--gold);margin:0 0 4px}

.shippu-game .ov[hidden] {display:none}

.shippu-game .ov__in {text-align:center;max-width:340px}

.shippu-game .ov__mark {font-family:var(--disp);font-size:12px;letter-spacing:.4em;color:var(--gold);margin-bottom:12px}

.shippu-game .ov__ttl {font-family:var(--disp);font-weight:700;font-size:36px;line-height:1.15;letter-spacing:.06em;
  margin:0 0 6px;color:var(--cream);text-shadow:0 2px 0 var(--red-dk)}

.shippu-game .ov__ttl em {display:block;font-style:normal;font-size:19px;color:var(--gold);letter-spacing:.2em;margin-bottom:5px}

.shippu-game .ov__txt {font-size:13px;line-height:1.85;color:rgba(244,233,210,.8);margin:0 0 16px}

.shippu-game .ov__txt b {color:var(--gold);font-size:15px}

.shippu-game .ov__list {text-align:left;font-size:12px;line-height:1.8;color:rgba(244,233,210,.75);margin:0 auto 18px;max-width:295px}

.shippu-game .ov__list b {color:var(--gold)}

.shippu-game .ov__ttl em2 {font-size:18px;color:var(--gold);letter-spacing:.14em;margin-left:4px}

.shippu-game .score {width:100%;max-width:250px;margin:4px auto 16px;border-collapse:collapse;
  font-size:13px;color:rgba(244,233,210,.85)}

.shippu-game .score td {padding:5px 8px;border-bottom:1px solid rgba(231,190,90,.2);text-align:left}

.shippu-game .score td:last-child {text-align:right;font-family:var(--disp);font-size:16px;font-weight:700;color:var(--cream)}

.shippu-game .score__sum td {border-bottom:0;color:var(--gold)}

.shippu-game .score__sum td:last-child {color:var(--gold);font-size:20px}

.shippu-game .ov__btn {display:inline-block;padding:12px 28px;border-radius:4px;
  background:linear-gradient(180deg,var(--red-lt),var(--red));border:1px solid var(--gold);
  font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:.2em;color:var(--cream)}

.shippu-game .ov__btn:active {transform:translateY(1px)}

.shippu-game .noren {position:absolute;inset:0 0 auto;height:0;z-index:25;pointer-events:none;overflow:hidden}

.shippu-game .noren b {position:absolute;top:0;width:25%;height:100%;background:linear-gradient(180deg,#8E1B10,#B4291C);border-right:1px solid rgba(0,0,0,.35)}

.shippu-game .noren b:nth-child(1) {left:0}

.shippu-game .noren b:nth-child(2) {left:25%}

.shippu-game .noren b:nth-child(3) {left:50%}

.shippu-game .noren b:nth-child(4) {left:75%}

.shippu-game .toast {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none;
  font-family:var(--disp);font-size:28px;font-weight:700;letter-spacing:.1em;opacity:0;white-space:nowrap}

.shippu-game .toast.ok {color:var(--gold);text-shadow:0 2px 0 var(--red-dk)}

.shippu-game .toast.ng {color:#FF9E8C;text-shadow:0 2px 0 #4A140E}

.shippu-game .toast.is-on {animation:pop .7s ease-out}

@keyframes pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.85)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}

@media (prefers-reduced-motion:reduce) {
.shippu-game * {animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media (max-height:730px) {
.shippu-game .key {min-height:28px}
.shippu-game .key__t {font-size:9px}
.shippu-game .face {max-width:34px}
.shippu-game .dish {width:40px;height:40px}
.shippu-game .ov__ttl {font-size:29px}
}

/* lg 未満：スマホ・タブレット縦で高さを大きく圧縮 */
@media (max-width: 1023px) {
  .shippu-game .band {height:6px}
  .shippu-game .hud {padding:5px 8px 4px}
  .shippu-game .hud__top {gap:4px}
  .shippu-game .badge-stage {padding:1px 6px 1px 2px;gap:2px}
  .shippu-game .badge-stage__ico {width:14px;height:14px}
  .shippu-game .badge-stage b {font-size:12px;letter-spacing:.04em}
  .shippu-game .miss {padding:2px 6px;gap:3px}
  .shippu-game .miss__lab {font-size:10px}
  .shippu-game .miss i {width:13px;height:13px}
  .shippu-game .miss i::before,
  .shippu-game .miss i::after {width:7px;height:1.6px;margin:-.8px 0 0 -3.5px}
  .shippu-game .hud__combo {font-size:11px;padding:1px 5px 3px}
  .shippu-game .hud__count {font-size:20px}
  .shippu-game .hud__count small {font-size:11px}
  .shippu-game .hud__bonus-lab {display:none} /* 「ボーナス」を隠し ＋N杯 だけに */
  .shippu-game .hud__bonus b {font-size:13px}
  .shippu-game .hud__bonus b::before {font-size:10px}
  .shippu-game .hud__bonus small {font-size:10px}
  .shippu-game .hud__bar {margin-top:4px;height:3px}

  .shippu-game .hall {padding:5px 5px 0}
  .shippu-game .lanes {gap:3px}
  .shippu-game .seat {gap:2px;padding:3px 2px 4px}
  .shippu-game .face {max-width:28px}
  .shippu-game .wait {height:5px}
  .shippu-game .slip {min-height:44px;padding:0 2px 2px;gap:1px;margin-top:3px}
  .shippu-game .slip--none {min-height:44px}
  .shippu-game .slip__hd {font-size:9px;letter-spacing:.12em;padding:1px 0;margin:0 -2px 2px}
  .shippu-game .tag {font-size:10px;padding:2px 2px}
  .shippu-game .tag--firm img,
  .shippu-game .tag--soup img,
  .shippu-game .tag--top img {width:11px;height:11px}
  .shippu-game .board {padding:4px 2px 5px;gap:2px}
  .shippu-game .dish {width:36px;height:36px;border-width:1.5px}
  .shippu-game .dish__noodle {inset:10px 4px 9px}
  .shippu-game .dish__tops img {width:12px;height:12px}
  .shippu-game .dish__tops.is-four img {width:10px;height:10px}
  .shippu-game .cap {font-size:8px;min-height:14px}
  .shippu-game .lane.is-ready .cap {font-size:11px;letter-spacing:.16em;min-height:18px}
  .shippu-game .hall__edge {height:3px}

  .shippu-game .kitchen {gap:2px;padding:3px 5px 4px}
  .shippu-game .keys {gap:2px}
  .shippu-game .keys__row {gap:3px}
  .shippu-game .keys__lab {width:16px;font-size:11px;letter-spacing:.1em}
  .shippu-game .keys__row--firm .keys__lab,
  .shippu-game .keys__row--soup .keys__lab,
  .shippu-game .keys__row--top .keys__lab {padding-top:5px}
  .shippu-game .keys__grid {gap:2px}
  .shippu-game .key {min-height:28px;border-radius:3px}
  .shippu-game .key i {width:1.875rem;height:1.875rem}
  .shippu-game .key img {max-width:3.75rem;max-height:3.75rem;padding:1px 2px 8px}
  .shippu-game .key__t {font-size:8px;line-height:1.2;bottom:2px;padding:3px 1px 0}
  .shippu-game .key--firm small {font-size:8px;top:1px;right:2px;padding:1px 2px}
}

@media (max-width: 639px) {
  .shippu-game .rmn {max-height: min(100dvh, 620px)}
  .shippu-game .hud__count {font-size:18px}
  .shippu-game .face {max-width:24px}
  .shippu-game .slip {min-height:38px}
  .shippu-game .slip--none {min-height:38px}
  .shippu-game .tag {font-size:9px}
  .shippu-game .dish {width:32px;height:32px}
  .shippu-game .key {min-height:24px}
  .shippu-game .key img {max-width:3.375rem;max-height:3.375rem;padding:1px 1px 7px}
  .shippu-game .keys__lab {width:14px;font-size:10px}
}

.shippu-game .ov {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shippu-game .shippu-lb-entry {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  flex-wrap: wrap;
}

.shippu-game .shippu-lb-entry input {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 14rem;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid rgba(231, 190, 90, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-size: 1rem;
}

.shippu-game .shippu-lb-entry .ov__btn {
  padding: 10px 18px;
  font-size: 15px;
  letter-spacing: 0.12em;
}

.shippu-game .ov .arcade-lb__list {
  max-height: 9rem;
  margin: 8px auto 12px;
  text-align: left;
  width: 100%;
  max-width: 280px;
}

.shippu-game .ov .arcade-lb__status {
  min-height: 1.2em;
  margin: 0 0 8px;
  font-size: 12px;
  color: rgba(244, 233, 210, 0.7);
}

.shippu-game.is-playing .rmn {
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
  .shippu-game,
  .shippu-game * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}