@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Playfair+Display:wght@700;800&display=swap');

:root { color-scheme: dark; --navy:#0b1a2d; --panel:#10243f; --cream:#f1ead9; --gold:#d6ae61; --muted:#8ea0b5; --red:#d36b5f; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 50% -10%,#1e4167 0,var(--navy) 42%,#071321 100%); color:var(--cream); font-family:'DM Sans',sans-serif; }
button { font:inherit; }
.app-shell { width:min(100%,760px); margin:auto; padding:calc(22px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.top-actions { display:flex; gap:8px; }
.eyebrow { color:var(--gold); letter-spacing:.18em; font-size:.68rem; font-weight:700; margin:0 0 3px; }
h1 { font-family:'Playfair Display',serif; letter-spacing:.08em; font-size:2rem; line-height:1; margin:0; }
.icon-button { width:42px; height:42px; border:1px solid #ffffff24; border-radius:50%; color:var(--cream); background:#ffffff0a; font-size:1.35rem; cursor:pointer; }
.icon-button.muted { color:var(--muted); opacity:.7; }
.game-board { position:relative; overflow:hidden; background:linear-gradient(145deg,#183b60,#0e2743); border:1px solid #ffffff18; border-radius:24px; padding:18px; box-shadow:0 20px 50px #0005,inset 0 1px #ffffff18; }
.game-board::after { content:'Y'; position:absolute; right:-15px; top:20px; font:800 14rem/1 'Playfair Display'; color:#ffffff05; pointer-events:none; }
.round-row { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.round-row span,.total-chip span { display:block; color:var(--muted); font-size:.62rem; letter-spacing:.12em; font-weight:700; }
.round-row strong { font-size:.93rem; }
.total-chip { text-align:right; }
.total-chip strong { color:var(--gold); font-size:1.25rem; }
.roll-dots { display:flex; gap:6px; }
.roll-dots span { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px #d6ae6177; }
.roll-dots span.used { background:#ffffff1f; box-shadow:none; }
.play-controls { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) 148px; gap:10px; align-items:center; margin:15px 0 10px; }
.message { color:#c9d2dd; font-size:.75rem; line-height:1.35; margin:0; }
.dice-box { position:relative; z-index:2; height:230px; overflow:hidden; border:6px solid #75512d; border-radius:18px; background:radial-gradient(circle at 50% 40%,#245b51,#153d39 68%,#0b2a29); box-shadow:inset 0 0 0 2px #c99f5366,inset 0 12px 30px #0007,0 12px 25px #0005; }
.dice-box::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(28deg,#ffffff07 0 1px,transparent 1px 8px); pointer-events:none; }
.dice-box::after { content:''; position:absolute; inset:5px; border:1px solid #ffffff10; border-radius:10px; box-shadow:inset 0 -10px 18px #0004; pointer-events:none; }
.box-badge { position:absolute; z-index:90; left:10px; top:8px; color:#d6ae6199; font-size:.49rem; font-weight:800; letter-spacing:.16em; pointer-events:none; }
.dice-tray { position:absolute; z-index:2; inset:0; }
.dice-tray:empty::after { content:'3D DICE LOADING'; position:absolute; inset:0; display:grid; place-items:center; color:#d6ae6188; font-size:.55rem; font-weight:800; letter-spacing:.16em; }
.dice-tray canvas { display:block; width:100%; height:100%; cursor:pointer; touch-action:manipulation; }
.dice-box.webgl-lost::after { content:'3D表示を復旧しています…'; z-index:100; display:grid; place-items:center; color:var(--cream); background:#0b2a29dd; font-size:.72rem; }
.dice-box.rolling { box-shadow:inset 0 0 0 2px #d6ae6188,inset 0 12px 34px #0008,0 12px 28px #0006; }
.keep-area { position:relative; z-index:3; margin-top:10px; padding:9px 10px 10px; border:1px solid #ffffff12; border-radius:14px; background:#07172855; }
.keep-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; color:var(--gold); font-size:.57rem; font-weight:800; letter-spacing:.16em; }
.keep-heading small { color:var(--muted); font-size:.54rem; font-weight:400; letter-spacing:0; }
.hold-rack { display:grid; grid-template-columns:repeat(5,minmax(0,50px)); justify-content:space-between; gap:5px; }
.hold-slot { position:relative; aspect-ratio:1; padding:5px; border:1px dashed #ffffff25; border-radius:11px; color:#ffffff2c; background:#ffffff05; cursor:pointer; }
.hold-slot:disabled { cursor:default; }
.hold-slot.occupied { border-style:solid; border-color:#d6ae6199; background:#d6ae6113; box-shadow:inset 0 0 10px #d6ae611d; animation:slot-pop .18s ease-out; }
.slot-plus { display:grid; place-items:center; width:100%; height:100%; font-size:1rem; }
.held-face { display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); width:100%; height:100%; padding:7px; border:1px solid #d8cfb9; border-radius:8px; background:linear-gradient(145deg,#fffdf3,#e7dfce); box-shadow:inset 2px 2px 4px #fff,inset -2px -2px 4px #aaa59b,0 3px 7px #0005; }
.hold-pip { display:block; align-self:center; justify-self:center; width:6px; height:6px; border-radius:50%; background:#172437; box-shadow:inset 1px 1px 1px #0006; }
.p1{grid-area:1/1}.p2{grid-area:1/2}.p3{grid-area:1/3}.p4{grid-area:2/1}.p5{grid-area:2/2}.p6{grid-area:2/3}.p7{grid-area:3/1}.p8{grid-area:3/2}.p9{grid-area:3/3}
@keyframes slot-pop { from{transform:scale(.75);opacity:.4} to{transform:scale(1);opacity:1} }
.roll-button { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:48px; margin:0; padding:6px 10px; border:0; border-radius:12px; background:linear-gradient(180deg,#e4c177,#c99f53); color:#172437; font-size:.75rem; line-height:1.15; font-weight:800; box-shadow:0 5px 14px #0005; cursor:pointer; }
.roll-button:disabled { opacity:.35; cursor:not-allowed; filter:grayscale(.5); }
.roll-icon { font-size:.7rem; }
.score-section { margin-top:28px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:11px; }
.section-heading>div { display:flex; align-items:center; gap:9px; }
.line { width:3px; height:18px; background:var(--gold); border-radius:3px; }
h2 { margin:0; font-family:'Playfair Display'; font-size:1rem; letter-spacing:.1em; }
.section-heading p { margin:0; color:var(--muted); font-size:.68rem; }
.score-card { overflow:hidden; border:1px solid #ffffff16; border-radius:18px; background:#ffffff08; }
.score-row { display:grid; grid-template-columns:42px 1fr 54px; align-items:center; width:100%; min-height:58px; padding:7px 13px; border:0; border-bottom:1px solid #ffffff0d; color:var(--cream); background:transparent; text-align:left; cursor:pointer; }
.score-row:not(:disabled):hover { background:#ffffff0b; }
.score-mark { color:var(--gold); font-family:'Playfair Display'; font-size:1.35rem; text-align:center; }
.score-name { font-weight:700; font-size:.88rem; padding-left:9px; }
.score-name small { display:block; color:var(--muted); font-size:.62rem; font-weight:400; margin-top:2px; }
.score-value { justify-self:end; min-width:39px; padding:6px 8px; border-radius:9px; color:#8290a1; text-align:center; font-size:1rem; }
.score-value.possible { color:#172437; background:var(--gold); }
.score-row.used { opacity:.5; }
.score-row.used .score-value { color:var(--cream); }
.card-divider { padding:8px 16px; background:#07172866; color:var(--gold); font-size:.56rem; font-weight:700; letter-spacing:.15em; }
.bonus-row { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:15px 17px; border:1px dashed #d6ae6155; border-radius:13px; color:var(--gold); font-weight:700; font-size:.8rem; }
.bonus-row small { color:var(--muted); font-weight:400; margin-left:8px; }
.bonus-row strong { font-size:1.05rem; }
.result-dialog { width:min(calc(100% - 36px),440px); padding:30px; border:1px solid #ffffff22; border-radius:23px; color:var(--cream); background:linear-gradient(145deg,#183b60,#0b1d32); text-align:center; box-shadow:0 30px 90px #000b; }
.result-dialog::backdrop { background:#06101ddd; backdrop-filter:blur(5px); }
.result-dialog h2 { font-size:1.5rem; margin:5px 0 22px; }
.final-score { padding:22px; border-block:1px solid #ffffff14; }
.final-score span { display:block; color:var(--muted); font-size:.65rem; letter-spacing:.15em; }
.final-score strong { color:var(--gold); font:800 4rem/1.2 'Playfair Display'; }
.result-dialog>p:not(.eyebrow) { color:var(--gold); font-weight:700; }
@media (min-width:620px) { .app-shell{padding-inline:28px}.game-board{padding:24px 32px}.dice-box{height:250px}.hold-rack{grid-template-columns:repeat(5,54px);justify-content:start;gap:12px}.score-card{display:grid;grid-template-columns:1fr 1fr}.score-row:nth-of-type(1n){border-right:1px solid #ffffff0d}.card-divider{grid-column:1/-1} }
@media (max-width:390px) { .app-shell{padding-inline:10px}.game-board{padding:15px 11px}.play-controls{grid-template-columns:minmax(0,1fr) 132px}.dice-box{height:220px;border-width:5px}.hold-rack{grid-template-columns:repeat(5,minmax(0,47px))}.held-face{padding:6px}.hold-pip{width:5px;height:5px}.section-heading p{display:none} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition-duration:.01ms!important} }