@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Gowun+Batang:wght@400;700&display=swap');

:root { --ink:#f3eee3; --muted:#9298aa; --gold:#efc76e; --red:#ec6c78; --blue:#75d8d0; --panel:#111522; --line:rgba(239,199,110,.25); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Gowun Batang",serif; background:#080a11; background-image:radial-gradient(circle at 50% 14%,rgba(62,73,112,.3),transparent 32%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:auto,34px 34px,34px 34px; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
button,a { font:inherit; }
button { color:inherit; }
.skip-link { position:absolute; left:-9999px; top:8px; z-index:10; background:var(--gold); color:#080a11; padding:10px; }
.skip-link:focus { left:8px; }
.is-awaiting-start { overflow:hidden; }
.start-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 42%,rgba(51,61,94,.72),rgba(5,7,12,.96) 56%),rgba(5,7,12,.94); backdrop-filter:blur(9px); }
.start-screen[hidden] { display:none; }
.start-card { position:relative; width:min(620px,100%); padding:clamp(42px,7vw,74px) clamp(24px,7vw,70px); overflow:hidden; border:1px solid var(--line); text-align:center; background:rgba(12,15,25,.92); box-shadow:0 35px 110px rgba(0,0,0,.6); }
.start-card::before { content:""; position:absolute; width:420px; height:420px; left:50%; top:48%; transform:translate(-50%,-50%); border:1px solid rgba(239,199,110,.1); border-radius:50%; box-shadow:0 0 0 55px rgba(239,199,110,.025),0 0 0 120px rgba(239,199,110,.016); pointer-events:none; }
.start-card>* { position:relative; z-index:1; }
.start-card h1 { margin:5px 0 24px; font:700 clamp(52px,10vw,84px)/.85 "Cormorant Garamond",serif; letter-spacing:.04em; }
.start-card h1 span { color:transparent; -webkit-text-stroke:1px var(--gold); }
.start-card>p:not(.kicker) { color:#c6c3bc; line-height:1.9; }
.start-actions { display:flex; justify-content:center; gap:10px; margin:32px 0 20px; }
.start-actions button { min-width:150px; padding:14px 22px; cursor:pointer; }
.secondary-button { border:1px solid var(--line); background:rgba(8,10,17,.65); color:var(--ink); }
.start-card small { color:var(--muted); font:10px/1.7 sans-serif; letter-spacing:.06em; }
.site-header { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid rgba(255,255,255,.07); letter-spacing:.15em; }
.brand { color:var(--gold); text-decoration:none; font-family:"Cormorant Garamond",serif; font-size:20px; font-weight:700; }
.header-button { padding:8px 0; border:0; border-bottom:1px solid var(--gold); background:none; color:var(--muted); font:11px sans-serif; letter-spacing:.18em; cursor:pointer; }
.game-shell { width:min(1180px,calc(100% - 28px)); margin:auto; padding:50px 0 80px; }
.intro { text-align:center; margin-bottom:35px; }
.kicker { margin:0 0 10px; color:var(--gold); font:11px sans-serif; letter-spacing:.3em; }
.intro h1 { margin:0; font:700 clamp(48px,8vw,86px)/.85 "Cormorant Garamond",serif; letter-spacing:.04em; }
.intro h1 span { color:transparent; -webkit-text-stroke:1px var(--gold); }
.intro>p:last-child { color:var(--muted); font-size:14px; }
.score-board { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:rgba(10,12,20,.72); backdrop-filter:blur(12px); }
.score-board>div { padding:18px 22px; display:flex; align-items:end; justify-content:space-between; border-right:1px solid var(--line); }
.score-board>div:last-child { border:0; }
.score-board span { color:var(--muted); font:10px sans-serif; letter-spacing:.14em; }
.score-board strong { font:600 25px "Cormorant Garamond",serif; }
.positive { color:var(--gold)!important; }
.negative { color:var(--red)!important; }
.table-toolbar { display:flex; justify-content:flex-end; margin:9px 0; }
.table { position:relative; min-height:660px; margin-top:0; padding:35px; display:grid; grid-template-columns:160px 220px 1fr; align-items:center; gap:30px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:radial-gradient(ellipse at center,rgba(45,54,85,.8),rgba(14,17,28,.96) 66%); box-shadow:0 28px 90px rgba(0,0,0,.38); }
.table::after { content:""; position:absolute; width:620px; height:620px; left:38%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(239,199,110,.11); border-radius:50%; box-shadow:0 0 0 50px rgba(239,199,110,.025),0 0 0 130px rgba(239,199,110,.018); pointer-events:none; }
.deck-zone { position:relative; z-index:1; width:220px; display:flex; flex-direction:column; align-items:center; }
.table-total { min-width:190px; margin-bottom:18px; padding:7px 22px 9px; text-align:center; border-bottom:1px solid var(--line); background:linear-gradient(90deg,transparent,rgba(8,10,17,.78) 18%,rgba(8,10,17,.78) 82%,transparent); }
.table-total span { display:block; color:var(--muted); font:9px sans-serif; letter-spacing:.25em; }
.table-total strong { display:block; margin-top:1px; font:700 48px/.9 "Cormorant Garamond",serif; text-shadow:0 0 28px currentColor; }
.history-button { padding:9px 12px; border:1px solid var(--line); background:rgba(8,10,17,.72); color:var(--muted); font:10px sans-serif; letter-spacing:.15em; cursor:pointer; }
.history-button span { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:6px; border-radius:50%; background:var(--gold); color:#11131b; font-weight:700; letter-spacing:0; }
.history-panel { position:absolute; z-index:4; inset:0 0 0 auto; width:min(390px,100%); padding:26px; overflow:auto; border-left:1px solid var(--line); background:rgba(10,13,22,.97); box-shadow:-24px 0 70px rgba(0,0,0,.5); animation:historyIn .25s ease-out; }
.history-panel[hidden] { display:none; }
@keyframes historyIn { from { opacity:0; transform:translateX(24px); } }
.history-heading { display:flex; align-items:start; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.history-heading span { color:var(--gold); font:9px sans-serif; letter-spacing:.22em; }
.history-heading h2 { margin:2px 0 0; font:600 34px "Cormorant Garamond",serif; }
.history-heading button { border:0; background:none; font-size:27px; cursor:pointer; }
.history-list { display:grid; gap:12px; margin-top:16px; }
.history-empty { margin:50px 0; color:var(--muted); text-align:center; font-size:12px; }
.history-row { padding:15px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025); }
.history-row header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.history-row header span { color:var(--muted); font:9px sans-serif; letter-spacing:.18em; }
.history-row header strong { font:700 25px "Cormorant Garamond",serif; }
.history-cards { display:flex; flex-wrap:wrap; gap:6px; }
.history-card { display:inline-flex; align-items:center; gap:5px; padding:6px 7px; border:1px solid rgba(255,255,255,.1); color:#d9dce4; font-size:10px; }
.history-card i { color:var(--muted); font:8px sans-serif; font-style:normal; }
.history-card b { font:700 14px "Cormorant Garamond",serif; }
.history-card.system { border-color:rgba(236,108,120,.25); }
.history-system { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.08); }
.history-system small { color:#777d90; font:8px sans-serif; letter-spacing:.12em; }
.system-zone,.deck,.player-zone { position:relative; z-index:1; }
.system-zone { align-self:start; }
.system-zone>p,.zone-heading p { font:11px sans-serif; letter-spacing:.2em; color:var(--muted); }
.pulse { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); }
.system-slot { width:120px; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed rgba(236,108,120,.35); color:#777d90; text-align:center; font-size:11px; line-height:1.7; }
.system-card { width:82px; height:142px; overflow:hidden; border:1px solid rgba(236,108,120,.7); filter:grayscale(.55); cursor:pointer; }
.system-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.system-card img { width:100%; height:100%; object-fit:cover; }
.system-score { min-width:42px; padding:4px 8px; border:1px solid currentColor; border-radius:3px; background:rgba(7,9,16,.75); font:700 18px "Cormorant Garamond",serif; line-height:1; }
.system-card.reversed img,.drawn-card.reversed .card-image img { transform:rotate(180deg); }
.deck { width:190px; padding:0; border:0; background:none; cursor:pointer; transition:transform .25s; }
.deck:hover:not(:disabled),.deck:focus-visible { transform:translateY(-8px); outline:none; }
.deck:disabled { cursor:not-allowed; filter:saturate(.5); }
.deck img { position:relative; z-index:2; width:170px; aspect-ratio:825/1425; object-fit:cover; border-radius:10px; border:2px solid var(--gold); box-shadow:-8px 8px 0 #151a29,-14px 14px 0 rgba(239,199,110,.25),0 28px 45px rgba(0,0,0,.55); }
.deck-shadow { position:absolute; width:150px; height:45px; left:15px; bottom:36px; background:#000; filter:blur(18px); opacity:.7; }
.deck-count { display:block; margin-top:24px; color:var(--muted); font:10px sans-serif; letter-spacing:.16em; }
.deck-count b { color:var(--ink); font-size:14px; }
.touch-hint { display:block; margin-top:8px; color:var(--gold); font:10px sans-serif; letter-spacing:.2em; animation:pulseText 1.7s infinite; }
@keyframes pulseText { 50% { opacity:.4; } }
.player-zone { min-width:0; }
.zone-heading { display:flex; justify-content:space-between; align-items:center; }
.zone-heading span { color:var(--gold); font:12px sans-serif; }
.zone-metrics { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.zone-metrics .turn-score-label { color:var(--muted); font-size:9px; letter-spacing:.08em; }
.zone-metrics .turn-score-label strong { margin-left:5px; font:700 22px "Cormorant Garamond",serif; letter-spacing:0; }
.player-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; min-height:395px; }
.empty-slot { display:grid; place-items:center; min-width:0; border:1px dashed rgba(255,255,255,.15); background:rgba(0,0,0,.09); }
.empty-slot span { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:50%; color:#585f72; font:11px sans-serif; }
.drawn-card { position:relative; min-width:0; opacity:0; transform:translateY(20px); cursor:pointer; animation:deal .45s var(--delay) forwards; }
.drawn-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@keyframes deal { to { opacity:1; transform:none; } }
.card-image { aspect-ratio:825/1425; overflow:hidden; border-radius:8px 8px 0 0; border:1px solid rgba(239,199,110,.45); background:#080a11; }
.card-image img { width:100%; height:100%; display:block; object-fit:contain; }
.card-meta { min-height:112px; padding:10px 11px; border:1px solid rgba(255,255,255,.1); border-top:0; background:#0d101a; }
.card-meta span { display:block; color:var(--gold); font:8px sans-serif; letter-spacing:.15em; }
.card-meta strong { display:block; margin:5px 0; font-size:14px; }
.card-meta small { display:block; color:var(--muted); font-size:10px; line-height:1.5; }
.card-score { position:absolute; right:8px; top:8px; min-width:43px; padding:7px; border-radius:3px; background:rgba(7,9,16,.9); text-align:center; font:700 20px "Cormorant Garamond",serif; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.controls { display:flex; align-items:center; justify-content:center; flex-direction:column; margin:0 0 12px; }
.primary-button { min-width:210px; padding:15px 22px; border:1px solid var(--gold); background:var(--gold); color:#11131b; font-weight:700; cursor:pointer; box-shadow:0 10px 32px rgba(239,199,110,.12); }
.primary-button:disabled { opacity:.28; cursor:not-allowed; }
.controls p { min-height:22px; color:var(--muted); font-size:12px; }
.result-panel { position:absolute; z-index:5; inset:0; display:grid; place-items:start center; padding:28px; overflow:auto; text-align:center; background:rgba(5,7,13,.72); backdrop-filter:blur(8px); animation:overlayIn .25s ease-out; }
.result-panel[hidden] { display:none; }
.result-card { width:min(560px,100%); margin:auto; padding:38px; border:1px solid var(--line); background:rgba(17,21,34,.97); box-shadow:0 22px 80px rgba(0,0,0,.65); }
@keyframes overlayIn { from { opacity:0; } }
.result-panel h2 { margin:5px 0; font:600 32px "Cormorant Garamond","Gowun Batang",serif; }
.result-panel h2 strong { margin-left:12px; font-size:46px; }
.result-panel>p:not(.kicker,.share-status) { color:var(--muted); font-size:13px; }
.final-summary { margin-top:22px; }
.final-summary[hidden] { display:none; }
.final-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:20px; background:var(--line); border:1px solid var(--line); }
.final-stats span { padding:8px 4px; background:#111522; color:var(--muted); font:8px sans-serif; letter-spacing:.08em; }
.final-stats b { display:block; margin-bottom:2px; color:var(--ink); font:700 16px "Cormorant Garamond",serif; }
.final-summary section+section { margin-top:18px; }
.final-summary h3 { margin:0 0 8px; color:var(--gold); font:10px sans-serif; letter-spacing:.16em; text-align:left; }
.final-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.final-card { min-width:0; }
.final-card>div { aspect-ratio:825/1425; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:#080a11; }
.final-card img { width:100%; height:100%; object-fit:contain; }
.final-card.reversed img { transform:rotate(180deg); }
.final-card span { display:block; margin-top:4px; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.final-card strong { display:block; font:700 18px "Cormorant Garamond",serif; }
.result-actions { display:flex; gap:8px; justify-content:center; margin:25px 0 18px; }
.result-actions[hidden] { display:none!important; }
.result-actions button { padding:10px 18px; border:1px solid rgba(255,255,255,.16); background:transparent; color:var(--ink); cursor:pointer; font-size:12px; }
.share-status { color:var(--blue); font-size:12px; }
dialog { width:min(520px,calc(100% - 30px)); padding:40px; border:1px solid var(--line); color:var(--ink); background:#111522; box-shadow:0 30px 100px #000; }
dialog::backdrop { background:rgba(3,4,8,.82); backdrop-filter:blur(5px); }
dialog h2 { font:600 38px "Cormorant Garamond","Gowun Batang",serif; }
dialog li { margin:15px 0; color:#b7bbc7; line-height:1.7; }
.dialog-close { position:absolute; right:15px; top:12px; border:0; background:none; font-size:28px; cursor:pointer; }
.card-dialog { width:min(700px,calc(100% - 28px)); grid-template-columns:minmax(190px,280px) 1fr; gap:34px; align-items:center; padding:46px; }
.card-dialog[open] { display:grid; }
.card-dialog-image { aspect-ratio:825/1425; overflow:hidden; border:2px solid var(--gold); border-radius:10px; background:#080a11; box-shadow:0 24px 55px rgba(0,0,0,.55); }
.card-dialog-image img { width:100%; height:100%; display:block; object-fit:contain; }
.card-dialog-image.reversed img { transform:rotate(180deg); }
.card-dialog-copy h2 { margin:3px 0 0; font:600 44px "Cormorant Garamond","Gowun Batang",serif; }
.card-dialog-en { margin:0 0 20px; color:var(--muted); font:15px "Cormorant Garamond",serif; }
.card-dialog-score { display:block; font:700 56px/1 "Cormorant Garamond",serif; }
.card-dialog-orientation { margin:4px 0 20px; color:var(--muted); font-size:12px; }
.card-dialog-meaning { padding-top:18px; border-top:1px solid var(--line); color:#d7d3ca; line-height:1.8; }
footer { display:flex; justify-content:space-between; padding:25px clamp(20px,5vw,72px); border-top:1px solid rgba(255,255,255,.07); color:#656b7d; font:10px sans-serif; letter-spacing:.08em; }

@media (max-width:850px) {
  .score-board { grid-template-columns:repeat(2,1fr); }
  .score-board>div:nth-child(2) { border-right:0; }
  .score-board>div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .table { grid-template-columns:110px 160px 1fr; padding:24px 16px; gap:14px; }
  .deck { width:150px; }.deck img { width:132px; }
  .card-image { height:225px; }
}
@media (max-width:650px) {
  .start-screen { padding:14px; }
  .start-card { padding:46px 20px 38px; }
  .start-card h1 { font-size:52px; }
  .start-card>p:not(.kicker) { font-size:13px; }
  .start-actions { flex-direction:column; }
  .start-actions button { width:100%; }
  .game-shell { padding-top:34px; }
  .intro { margin-bottom:25px; }
  .intro h1 { font-size:53px; }
  .score-board>div { padding:14px 12px; flex-direction:column; align-items:flex-start; gap:5px; }
  .table { min-height:0; grid-template-columns:90px 1fr; grid-template-areas:"system deck" "player player"; align-items:start; }
  .table-toolbar { margin:7px 0; }
  .deck-zone { width:150px; grid-area:deck; justify-self:center; }
  .table-total { min-width:140px; margin-bottom:12px; padding-inline:10px; }
  .table-total strong { font-size:38px; }
  .history-button { padding:7px; font-size:8px; }
  .history-button span { min-width:18px; height:18px; margin-left:3px; }
  .history-panel { padding:20px 16px; }
  .system-zone { margin-top:56px; }
  .system-zone { grid-area:system; }.player-zone { grid-area:player; width:100%; margin-top:20px; }
  .system-slot { width:82px; min-height:135px; }.system-card { width:58px; height:100px; }
  .player-cards { position:relative; display:block; min-height:510px; overflow:visible; perspective:900px; }
  .player-cards>.drawn-card,.player-cards>.empty-slot { position:absolute; top:0; left:50%; width:min(230px,72vw); min-height:495px; transform:translateX(calc(-50% + var(--stack-x,0px))); transition:transform .2s ease,filter .2s ease; }
  .player-cards>.drawn-card:nth-child(1),.player-cards>.empty-slot:nth-child(1) { z-index:1; }
  .player-cards>.drawn-card:nth-child(2),.player-cards>.empty-slot:nth-child(2) { z-index:2; }
  .player-cards>.drawn-card:nth-child(3),.player-cards>.empty-slot:nth-child(3) { z-index:3; }
  .player-cards>.empty-slot { z-index:0!important; opacity:.22; }
  .player-cards>.drawn-card { user-select:none; cursor:pointer; animation:mobileDeal .3s var(--delay) both; }
  @keyframes mobileDeal { from { opacity:0; margin-top:18px; } to { opacity:1; margin-top:0; } }
  .card-meta { min-height:95px; padding:8px 10px; }.card-meta strong { font-size:12px; }.card-meta small { font-size:9px; }
  .card-score { left:4px; right:auto; top:4px; min-width:38px; padding:6px 4px; font-size:18px; }
  .player-zone .controls { margin:0 0 8px; }
  .player-zone .controls .primary-button { width:min(230px,78vw); }
  .result-panel { padding:16px; }
  .result-card { padding:28px 16px; }
  .result-actions button { padding:9px 11px; }
  .card-dialog { grid-template-columns:1fr; gap:22px; padding:42px 24px 28px; }
  .card-dialog-image { width:min(230px,65vw); margin:auto; }
  .card-dialog-copy { text-align:center; }
  .card-dialog-copy h2 { font-size:36px; }
  .card-dialog-score { font-size:48px; }
}