:root{font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Meiryo",sans-serif;color:#18111a;font-synthesis:none}
*{box-sizing:border-box}html{background:#fbf3e4;min-height:100%}
body{margin:0;background:radial-gradient(circle at 1px 1px,#ebd8b7 1px,transparent 0) 0 0/22px 22px;min-height:100vh}
.phone-screen{width:min(100%,460px);margin:0 auto;background:#d7f9ac;box-shadow:0 0 0 4px #111,0 20px 60px #20183a55;overflow:hidden}
.game{position:relative;width:100%;aspect-ratio:820/1458;background:#281560;overflow:hidden}
canvas{display:block;width:100%;height:100%;pointer-events:none}
.hit{position:absolute;opacity:0;background:transparent;border:0;cursor:pointer;touch-action:manipulation;padding:0;border-radius:60px}
.hit.roll{left:28.5%;top:67.7%;width:69.8%;height:10.0%}
.hit.save{left:28.5%;top:79.8%;width:36.7%;height:7.4%}
.hit.share{left:67.3%;top:79.8%;width:30.8%;height:7.4%}
.hit:focus-visible{opacity:1;outline:5px solid #ffe91a;outline-offset:-5px}
.hit:disabled{cursor:not-allowed}
.hit:active:not(:disabled){opacity:.12;background:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 13px 0;background:#fff9df}
.stat{background:#fff;border:3px solid #151116;border-radius:17px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px}
.stat span{font-size:11px;font-weight:900}.stat strong{font-size:clamp(15px,4vw,20px);font-weight:1000}
.message{background:#fff9df;color:#332269;text-align:center;margin:0;padding:9px 14px 4px;font-weight:900;font-size:12px;min-height:30px}
.explanation{background:#fff9df;color:#645a65;text-align:center;margin:0;padding:5px 12px 16px;font-size:10px;line-height:1.6;font-weight:600}
@media (min-width:600px){.phone-screen{margin:24px auto;border:5px solid #151017;border-radius:30px}.game{border-radius:23px 23px 0 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* The cards below the game use the same heavy, rounded comic lettering. */
.stat span,.stat strong,.message{font-weight:900;-webkit-text-stroke:.35px currentColor;letter-spacing:-.015em}
.stat{border-width:4px;box-shadow:0 4px 0 #ffde18}
.message{font-size:13px}.explanation{font-size:10px;font-weight:750}

/* v2.3: ポップなSNS共有メニュー（スマホ幅を最優先） */
[hidden]{display:none!important}
body.share-open{overflow:hidden}
.share-overlay{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;align-items:center;padding:16px;background:rgba(16,9,37,.78);overscroll-behavior:contain}
.share-dialog{width:min(100%,420px);max-height:min(92dvh,810px);overflow-y:auto;overscroll-behavior:contain;background:#fffaf0;border:5px solid #070508;border-radius:28px;box-shadow:8px 10px 0 #ffe523;position:relative;outline:none;-webkit-overflow-scrolling:touch}
.share-head{position:relative;background:#e92524;color:white;padding:19px 54px 17px 19px;border-bottom:5px solid #070508}
.share-kicker{display:inline-block;font:900 12px/1.2 Arial,sans-serif;letter-spacing:.1em;color:#ffeb1c;-webkit-text-stroke:0}
.share-head h2{margin:3px 0 5px;font-size:clamp(21px,6vw,27px);font-weight:1000;line-height:1.3;letter-spacing:-.04em;-webkit-text-stroke:.3px currentColor;text-shadow:2px 2px 0 #130708}
.share-head p{margin:0;font-size:12px;font-weight:850;line-height:1.5}
.share-close{position:absolute;right:13px;top:15px;width:41px;height:41px;border:3px solid #080508;border-radius:50%;background:#ffeb20;font:900 30px/1 Arial,sans-serif;color:#171015;display:grid;place-items:center;cursor:pointer;box-shadow:2px 3px 0 #070508}
.share-result{margin:16px 16px 0;border:3px solid #0b080b;border-radius:15px;padding:11px 9px;background:#fff8cf;text-align:center;color:#c3191d;font-size:clamp(15px,4.5vw,19px);font-weight:1000;-webkit-text-stroke:.3px currentColor}
.share-grid{padding:14px 16px 2px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.share-option{font-family:inherit;color:#141016;min-width:0;min-height:119px;border:3px solid #0b080b;border-radius:19px;background:#fff;box-shadow:3px 5px 0 #ffdf18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 6px;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .12s;text-align:center}
.share-option:focus-visible,.share-close:focus-visible{outline:4px solid #16a6fa;outline-offset:3px}
.share-option:active{transform:translate(2px,3px);box-shadow:1px 2px 0 #ffdf18}
.share-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-weight:1000;color:#fff;line-height:1}
.brand-x{background:#09090b;font-size:26px}
.brand-facebook{background:#1969d7;font-family:Arial,sans-serif;font-size:37px;padding-top:6px}
.brand-line{background:#08bc53;font-family:Arial,sans-serif;font-size:12px;border-radius:50%;letter-spacing:-.09em}
.brand-copy{background:#ffde1c;color:#09060b}
.brand-other{background:#6638d6;color:white;flex:none}
.share-name{display:block;font-size:clamp(13px,3.8vw,16px);font-weight:1000;line-height:1.25;letter-spacing:-.04em;-webkit-text-stroke:.28px currentColor}
.share-hint{display:block;font-size:10px;font-weight:800;line-height:1.3;color:#706471}
.other-option{grid-column:1 / -1;min-height:72px;flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 16px;gap:12px}
.share-other-copy{display:flex;flex-direction:column;gap:4px;flex:1}
.share-chevron{font-family:Arial,sans-serif;font-size:31px;line-height:1;margin-left:auto}
.share-footnote{padding:0 16px;margin:12px 0 0;font-size:10px;font-weight:750;color:#5e5364;line-height:1.65;text-align:center}
.share-feedback{margin:2px 0 10px;min-height:17px;text-align:center;padding:0 10px;font-size:12px;font-weight:1000;color:#b51827}
@media(max-width:350px){.share-overlay{padding:10px}.share-dialog{border-width:4px;box-shadow:5px 7px 0 #ffe523}.share-grid{padding:12px 11px 1px;gap:10px}.share-option{min-height:106px}.share-footnote{font-size:9px}}
@media(max-height:620px){.share-overlay{align-items:flex-start}.share-dialog{max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){.share-option{transition:none}}

/* v2.4: SNS共有の情報整理・Safariを含むスマホUI最適化 */
.share-overlay{padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));height:100dvh;overflow-y:auto}
.share-dialog{max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:24px;box-shadow:6px 7px 0 #ffe523;scrollbar-width:none}
.share-dialog::-webkit-scrollbar{display:none}
.share-head{padding:13px 52px 12px 16px;border-bottom-width:4px}
.share-head h2{font-size:clamp(21px,5.5vw,25px);line-height:1.2;margin:2px 0 4px}
.share-head p{font-size:11px}
.share-close{right:12px;top:12px;width:39px;height:39px}
.share-result{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.95fr);gap:0;margin:12px 13px 0;padding:8px 5px;border-width:3px;border-radius:14px;align-items:center}
.share-metric{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:0 4px;text-align:center}
.share-metric+.share-metric{border-left:2px dashed #e3bc63}
.share-metric-label{display:block;color:#171219;font-size:clamp(11px,3vw,13px);font-weight:900;line-height:1.2;white-space:nowrap}
.share-metric-value{display:block;width:100%;color:#cc1a22;font-size:clamp(16px,5vw,22px);line-height:1.25;font-weight:1000;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.055em;-webkit-text-stroke:.2px currentColor}
.share-metric-value.is-long{font-size:clamp(13px,3.7vw,17px)}
.share-grid{padding:12px 13px 0;gap:9px}
.share-option{min-height:99px;border-radius:17px;padding:8px 5px;gap:4px;box-shadow:3px 4px 0 #ffdf18}
.share-icon{width:35px;height:35px;border-radius:11px}
.brand-x{font-size:24px}.brand-facebook{font-size:31px;padding-top:5px}.brand-line{font-size:10px}
.share-name{font-size:clamp(13px,3.6vw,15px);line-height:1.2}
.share-hint{font-size:10px;line-height:1.15}
.other-option{min-height:61px;padding:8px 12px;gap:10px}
.share-other-copy{gap:3px}
.share-post-copy{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 26px);min-height:44px;margin:12px 13px 0;padding:9px 12px;background:#fff0a7;border:2px solid #151016;border-radius:13px;box-shadow:2px 3px 0 #f8d82d;color:#171015;font-family:inherit;font-size:clamp(12px,3.4vw,14px);font-weight:1000;cursor:pointer;touch-action:manipulation}
.share-copy-svg{width:18px;height:18px;flex:none}
.share-footnote{margin:10px 0 2px;padding:0 14px;font-size:10px;line-height:1.5}
.share-feedback{min-height:16px;margin:2px 0 8px;font-size:11px;line-height:1.4}
.share-post-copy:focus-visible{outline:4px solid #16a6fa;outline-offset:3px}
.share-post-copy:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #f8d82d}
@media(max-width:350px){.share-grid{gap:8px;padding:10px 10px 0}.share-result{margin:10px 10px 0}.share-option{min-height:92px}.other-option{min-height:57px}.share-post-copy{width:calc(100% - 20px);margin:10px 10px 0}.share-footnote{font-size:9px}}
@media(max-height:640px){.share-overlay{align-items:flex-start}}

/* v2.5: iPhone Photos save fallback, only shown if native sharing isn't available. */
.photo-save-overlay[hidden]{display:none!important}
.photo-save-overlay{position:fixed;z-index:1010;inset:0;background:rgba(19,12,32,.78);display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))}
.photo-save-dialog{position:relative;display:flex;flex-direction:column;align-items:center;width:min(100%,420px);max-height:calc(100dvh - 32px);overflow:auto;border:5px solid #100c13;border-radius:23px;background:#fff9e6;box-shadow:6px 8px 0 #ffe017;padding:16px 16px 20px;text-align:center}
.photo-save-dialog h2{font-size:clamp(18px,5vw,24px);margin:2px 37px 7px 0;color:#c71c1c;font-weight:1000}
.photo-save-dialog p{font-size:13px;font-weight:800;line-height:1.6;margin:2px 0 12px;color:#21131b}
.photo-save-dialog img{width:min(100%,230px);height:auto;border:3px solid #161218;border-radius:10px;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default;touch-action:auto}
.photo-save-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:3px solid #120e14;border-radius:50%;background:#ffe017;font-size:28px;line-height:1;font-weight:1000;cursor:pointer}
.photo-save-dialog a{display:inline-block;text-decoration:underline;margin-top:12px;color:#4e278b;font-size:12px;font-weight:900}
body.photo-save-open{overflow:hidden}