:root { --ink: #12081e; --hot: #e0203a; --gold: #ffd54a; --shadow: 0 10px 30px rgba(0, 0, 0, .5); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; margin: 0; overflow: hidden; background: #06040e;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color: #f1e8ff; -webkit-user-select: none; user-select: none; touch-action: none;
}
button { font: inherit; }
#safe { position: fixed; left: 0; top: 0; width: 0; height: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); visibility: hidden; pointer-events: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#mute, #quit, #gear { position: fixed; top: max(8px, env(safe-area-inset-top)); z-index: 5; width: 36px; height: 36px; border-radius: 18px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; cursor: pointer; }
#mute { right: 8px; }
#gear { right: 50px; }
#quit { left: 8px; }
#quit[hidden] { display: none; }
#title, #result, #confirm, #settings { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; background: rgba(4, 2, 10, .78); }
#title[hidden], #result[hidden], #confirm[hidden], #settings[hidden] { display: none; }
#settings { z-index: 12; }
.row { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(180,140,255,.18); font-weight: 700; font-size: 14px; text-align: left; }
.row input[type=range] { width: 100%; accent-color: #ffcf40; }
.row b { font-size: 12px; color: #ffcf40; text-align: right; }
#confirm { z-index: 12; }
.panel { width: min(92vw, 420px); max-height: calc(100% - 20px); overflow-y: auto; background: linear-gradient(180deg, #24103e, #0c0618); border: 3px solid #b48cff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px 16px; text-align: center; }
.panel.small { width: min(80vw, 320px); }
.logo { font-family: "Dela Gothic One", serif; font-size: min(64px, 16vw); line-height: 1.05; color: var(--gold); text-shadow: 3px 3px 0 var(--hot), 6px 6px 0 #000; letter-spacing: 4px; }
.logo small { display: block; font-size: 14px; color: #d8c8ff; text-shadow: none; letter-spacing: 4px; font-family: inherit; font-weight: 800; margin-top: 4px; }
.lead { margin-top: 10px; font-weight: 700; font-size: 15px; line-height: 1.6; }
.gold { color: var(--gold); }
.opts { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ol { font-size: 12px; font-weight: 700; opacity: .7; }
.opt { border: 2px solid #b48cff; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 800; font-size: 16px; width: 40px; padding: 6px 0; cursor: pointer; }
.opt.on { background: var(--hot); color: #fff; }
.opt.w { width: auto; min-width: 46px; padding: 6px 8px; font-size: 14px; }
#tbest { margin-top: 8px; font-size: 13px; font-weight: 700; opacity: .85; line-height: 1.6; }
.howto { list-style: none; padding: 0; margin: 12px 0 14px; text-align: left; font-size: 13px; line-height: 1.7; }
.howto b.k { display: inline-block; min-width: 76px; color: #ffcf5a; }
.howto li.pc { display: none; }
@media (pointer: fine) { .howto li.pc { display: list-item; } }
.rk { font-weight: 900; padding: 0 3px; border-radius: 4px; }
.rk.r0 { color: #ddd; } .rk.r1 { color: #6cf; } .rk.r2 { color: #5e7; } .rk.r3 { color: #f66; } .rk.r4 { color: #fd4; } .rk.r5 { color: #fff; background: linear-gradient(90deg, #f44, #fd4, #4f8, #4cf, #c6f); color: #000; }
.main, .sub { border: 3px solid #000; border-radius: 14px; padding: 10px 22px; font-weight: 800; font-size: 18px; cursor: pointer; box-shadow: 0 4px 0 #000; }
.main { background: var(--hot); color: #fff; }
button.sub { background: #fff; color: var(--ink); font-size: 15px; }
button[hidden] { display: none; }
.main:active, button.sub:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.rtitle { font-weight: 900; font-size: 22px; }
.rnum { font-weight: 900; font-size: 50px; line-height: 1.1; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 #000; }
.rnum .unit { font-size: 22px; margin-left: 4px; }
.rsub { font-weight: 700; font-size: 14px; margin-top: 6px; line-height: 1.7; }
.rbest { font-weight: 800; font-size: 15px; margin-top: 6px; min-height: 1.2em; color: #ffcf5a; }
.rbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
/* ロゴの 台座（金の 竜。ChatGPT の 絵） */
.logo { background: url(img/logo_frame.webp?v=1) center 40% / min(340px, 86vw) auto no-repeat; padding: 46px 0 40px; }
.speclink { text-align: center; margin: 10px 0 2px; } .speclink a { color: #ffd54a; font-weight: 800; font-size: 13px; }

/* タイトル: 竜宝 天井知らず */
#title { background: #05030a; overflow: hidden; }
.thero { position: absolute; inset: 0; pointer-events: none; }
.thero .tbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(1.3); animation: tzoom 18s ease-in-out infinite alternate; }
.thero .tdragon { position: absolute; right: -18%; top: 2%; width: min(95vw, 620px); filter: drop-shadow(0 0 40px rgba(255,190,60,.55)); animation: tfloat 4.5s ease-in-out infinite; }
.thero .tluka { position: absolute; left: -10%; bottom: -2%; width: min(62vw, 420px); filter: drop-shadow(0 0 24px rgba(80,160,255,.45)); opacity: .9; }
.thero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(5,3,10,0) 0%, rgba(5,3,10,.55) 70%, rgba(5,3,10,.9) 100%); }
.tember { position: absolute; inset: -20% 0 0 0; background-image: radial-gradient(2px 2px at 10% 80%, #ffcf6a, transparent), radial-gradient(2px 2px at 30% 60%, #ff9a3a, transparent), radial-gradient(1.5px 1.5px at 55% 90%, #fff0a0, transparent), radial-gradient(2px 2px at 75% 70%, #ffb040, transparent), radial-gradient(1.5px 1.5px at 90% 85%, #ffe080, transparent); background-size: 260px 260px; animation: tember 7s linear infinite; opacity: .8; z-index: 1; }
.tember.b { background-size: 340px 340px; animation-duration: 11s; opacity: .55; }
@keyframes tember { to { background-position: 0 -520px; } }
@keyframes tfloat { 50% { translate: 0 -14px; } }
@keyframes tzoom { to { transform: scale(1.12); } }
.tpanel { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(20,8,30,.35), rgba(8,4,16,.86) 38%, rgba(8,4,16,.94)); border: 2px solid rgba(255,213,74,.55); box-shadow: 0 0 40px rgba(255,170,40,.25), var(--shadow); backdrop-filter: blur(2px); }
.logo2 { position: relative; width: min(80vw, 360px); aspect-ratio: 3 / 2; margin: -6px auto 0; display: grid; place-items: center; }
.logo2 .lframe { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 20px rgba(0,0,0,.85)); animation: lglow 3.2s ease-in-out infinite; }
@keyframes lglow { 50% { filter: drop-shadow(0 8px 20px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(255,200,60,.75)); } }
.logo2 .lmain { position: relative; margin-top: -6%; font-family: "Dela Gothic One", serif; font-size: min(19vw, 86px); line-height: 1; letter-spacing: 8px; padding-left: 8px;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 200% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fffbe0 0%, #ffd24a 38%, #a85c00 50%, #ffc828 63%, #fff3b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #3a1400;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 16px rgba(255,160,0,.85)); animation: lshine 3.6s ease-in-out infinite; }
@keyframes lshine { 0%, 55% { background-position: 200% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }
.lsub { position: relative; margin-top: -4px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.lsub::before, .lsub::after { content: ""; flex: 1; max-width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #ffd54a); }
.lsub::after { background: linear-gradient(90deg, #ffd54a, transparent); }
.lsub span { font-family: "Yuji Boku", "Dela Gothic One", serif; font-size: min(10vw, 44px); letter-spacing: 6px; color: #fff4e0; transform: rotate(-3deg);
  text-shadow: 0 0 4px #ff4020, 0 0 12px #ff3010, 0 0 26px rgba(255,90,0,.9), 2px 3px 0 #2a0000; animation: lfire 1.8s ease-in-out infinite; }
@keyframes lfire { 50% { text-shadow: 0 0 6px #ff6030, 0 0 18px #ff4010, 0 0 36px rgba(255,140,0,1), 2px 3px 0 #2a0000; } }
.lkind { margin-top: 4px; font-size: 11px; letter-spacing: .6em; color: #d8c08a; }
.tpanel { overflow-x: hidden; scrollbar-width: none; padding-bottom: 0; }
.panel { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* 打つ ボタンは 縦が 短い 画面でも つねに 見える ように 下に 固定 */
.tpanel .rbtns { position: sticky; bottom: 0; z-index: 3; margin: 14px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(8,4,16,0), rgba(8,4,16,.96) 30%); } .tpanel::-webkit-scrollbar { display: none; }

/* タイトルロゴ（ChatGPT の 絵）: たたきつけ → 光が 走る → 金の 光が 脈打つ */
.tlogo { position: relative; width: min(90vw, 400px); margin: -10px auto 0; aspect-ratio: 3 / 2; animation: tslam .7s cubic-bezier(.2,1.6,.4,1) both, tpulse 2.6s ease-in-out .8s infinite; }
.tlogo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tlogo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(img/logo_title.webp?v=1) center / contain no-repeat; mask: url(img/logo_title.webp?v=1) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 48%, rgba(255,240,180,.5) 52%, transparent 62%) -150% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen; animation: tsweep 3s ease-in-out 1s infinite; }
.tlogo::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,190,60,.55), rgba(255,120,0,0) 70%); filter: blur(10px); z-index: -1; animation: tpulse2 2.6s ease-in-out infinite; }
@keyframes tslam { 0% { transform: scale(2.4); opacity: 0; filter: brightness(3); } 60% { opacity: 1; } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes tsweep { 0% { background-position: 160% 0; } 55%, 100% { background-position: -160% 0; } }
@keyframes tpulse { 50% { filter: drop-shadow(0 0 18px rgba(255,200,60,.85)) drop-shadow(0 0 40px rgba(255,90,0,.5)); } }
@keyframes tpulse2 { 50% { opacity: .55; transform: scale(1.06); } }
.tlogo { width: 100%; max-width: 400px; }