:root {
  color-scheme: dark;
  --felt: #123f34;
  --felt-2: #0d322a;
  --cream: #f8f3e7;
  --gold: #e6b25b;
  --red: #ba3d3d;
  --ink: #1d2422;
  --card-w: clamp(28px, calc((100vw - 54px) / 7), 90px);
  --card-h: calc(var(--card-w) * 1.38);
  --face-step: clamp(22px, 5.8vw, 36px);
  --back-step: clamp(8px, 2.2vw, 14px);
  --card-back: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='30' height='34' viewBox='0 0 30 34'%3E%3Cg fill='%239ac8ed' fill-opacity='.82'%3E%3Cpath d='M8 2S2 9 2 13a6 6 0 0 0 12 0C14 9 8 2 8 2Z'/%3E%3Cpath d='M23 18s-5 6-5 9a5 5 0 0 0 10 0c0-3-5-9-5-9Z'/%3E%3C/g%3E%3Cpath d='M6 10c0 2 1 3 3 4' fill='none' stroke='%23ffffff' stroke-opacity='.65' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.15), transparent 42%),
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,.012) 3px 6px),
    var(--felt);
  color: var(--cream);
  font-family: system-ui, -apple-system, "Yu Gothic UI", "Hiragino Sans", sans-serif;
}
.loading { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--felt); color: var(--cream); }
.loading[hidden] { display: none; }
.loading span { width: 38px; height: 38px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button { font: inherit; touch-action: manipulation; }
.app {
  width: min(100%, 860px);
  height: 100dvh;
  margin: auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(8px, 2.5vw, 22px) max(10px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.topbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 2px; color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .17em; }
h1 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(1.45rem, 6vw, 2.8rem); font-weight: 500; letter-spacing: .02em; }
.light-button, .accent-button {
  min-height: 40px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px;
  padding: 8px 14px; background: rgba(255,255,255,.1); color: var(--cream); cursor: pointer;
}
.accent-button { border-color: var(--gold); background: var(--gold); color: #2d2618; font-weight: 800; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 10px 0 2px; padding: 7px 12px; border-block: 1px solid rgba(255,255,255,.17); }
.stats div { text-align: center; }
.stats span { display: block; color: rgba(255,255,255,.65); font-size: .62rem; }
.stats strong { font-size: .9rem; }
.message { min-height: 1.35em; margin: 5px 0; color: rgba(255,255,255,.75); font-size: .78rem; }
.table { flex: 1; min-height: 0; position: relative; }
.top-row { display: grid; grid-template-columns: var(--card-w) var(--card-w) 1fr auto; gap: clamp(5px, 1.5vw, 12px); align-items: start; }
.foundations { display: grid; grid-template-columns: repeat(4, var(--card-w)); gap: clamp(3px, 1.1vw, 8px); }
.slot, .card {
  width: var(--card-w); height: var(--card-h); border-radius: clamp(4px, 1.4vw, 8px); cursor: pointer;
}
.slot { position: relative; border: 1.5px solid rgba(255,255,255,.32); background: rgba(0,0,0,.06); color: rgba(255,255,255,.33); }
.slot.foundation::after { content: attr(data-suit); position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--card-w) * .42); }
.stock.has-cards { border-color: rgba(255,255,255,.6); background-color: #234c84; background-image: var(--card-back); box-shadow: inset 0 0 0 3px #f0eadc; }
.stock.recycle::after { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--card-w) * .46); color: var(--cream); }
.tableau { height: calc(100% - var(--card-h) - clamp(10px, 2vh, 18px)); display: grid; grid-template-columns: repeat(7, var(--card-w)); justify-content: space-between; gap: 3px; margin-top: clamp(10px, 2vh, 18px); }
.pile { position: relative; min-width: 0; height: 100%; border-radius: 7px; }
.pile::before { content: ""; position: absolute; inset: 0 auto auto 0; width: var(--card-w); height: var(--card-h); border: 1.5px solid rgba(255,255,255,.18); border-radius: clamp(4px, 1.4vw, 8px); }
.card {
  position: absolute; inset: 0 auto auto 0; padding: 4px; border: 1px solid #b9b5aa; background: var(--cream); color: var(--ink);
  text-align: left; font-family: Georgia, serif; font-size: clamp(.62rem, calc(var(--card-w) * .24), 1.25rem); font-weight: 800;
  box-shadow: 0 2px 5px rgba(0,0,0,.22); user-select: none; touch-action: none;
}
.card.red { color: var(--red); }
.card.back { border-color: #ede6d7; background-color: #234c84; background-image: var(--card-back); box-shadow: inset 0 0 0 3px #f0eadc, 0 2px 5px rgba(0,0,0,.22); color: transparent; }
.card .corner { position: absolute; z-index: 2; top: 4px; left: 4px; width: max-content; min-height: 16px; padding: 1px 2px; display: flex; flex-direction: row; align-items: center; gap: 1px; border-radius: 3px; background: rgba(248,243,231,.88); line-height: 1; }
.card .corner i { font-style: normal; }
.card .suit-big { position: absolute; right: 5px; bottom: 4px; font-size: calc(var(--card-w) * .4); font-weight: 400; line-height: 1; opacity: .92; }
.card.selected { outline: 3px solid var(--gold); outline-offset: 1px; transform: translateY(-3px); z-index: 60 !important; }
.card.drag-source { opacity: .42; }
.drag-ghost { position: fixed !important; inset: 0 auto auto 0 !important; z-index: 1000 !important; margin: 0 !important; pointer-events: none !important; opacity: .96; box-shadow: 0 16px 28px rgba(0,0,0,.4) !important; }
.drag-ghost[data-count]:not([data-count="1"])::after { content: attr(data-count) "枚"; position: absolute; right: -8px; top: -9px; padding: 3px 6px; border-radius: 999px; background: var(--gold); color: #2b2518; font: 800 11px/1 system-ui, sans-serif; }
.pile.drop-valid::before, .foundation.drop-valid { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(230,178,91,.7); }
.pile.drop-invalid::before, .foundation.drop-invalid { box-shadow: 0 0 0 3px #e97769; }
body.is-dragging { cursor: grabbing; }
.card.hinted, .slot.hinted, .pile.hinted::before { animation: glow .7s ease-in-out 2; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px var(--gold), 0 0 22px var(--gold); } }
.toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 8px; }
.toolbar button { min-height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(0,0,0,.13); color: var(--cream); cursor: pointer; }
.toolbar button:disabled { opacity: .35; cursor: default; }
.toolbar span { margin-left: 4px; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(2,15,12,.72); }
.modal[hidden] { display: none; }
.dialog { width: min(100%, 430px); padding: 26px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: #163f36; box-shadow: 0 25px 80px rgba(0,0,0,.42); }
.dialog h2 { margin: 0 0 8px; font-family: Georgia, "Yu Mincho", serif; font-size: 1.7rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
body.paused::after { content: "一時停止中"; position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(13,50,42,.94); color: var(--cream); font-size: 1.4rem; font-weight: 800; }

@media (max-width: 380px) {
  .light-button { padding-inline: 9px; font-size: .72rem; }
  .toolbar span { display: none; }
}
@media (max-width: 500px) {
  .card .suit-big { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --card-w: clamp(36px, 8.5vh, 62px); --face-step: clamp(18px, 6vh, 25px); --back-step: 8px; }
  .app { width: min(100%, 980px); padding-block: 6px; }
  .topbar { position: absolute; left: 12px; bottom: 8px; z-index: 10; }
  .topbar .eyebrow, .topbar h1 { display: none; }
  .stats { position: absolute; right: 12px; bottom: 8px; width: 45%; z-index: 10; margin: 0; }
  .message { margin: 0 0 3px; }
  .tableau { height: calc(100% - var(--card-h) - 8px); margin-top: 8px; }
  .toolbar { position: absolute; left: 50%; bottom: 6px; width: 34%; transform: translateX(-50%); z-index: 11; padding: 0; }
  .toolbar button { min-height: 36px; }
  .card .suit-big { display: none; }
}