:root{--navy:#080d27;--cyan:#70edff;--violet:#b275ff;--pink:#ff55d7;--gold:#ffe395;--ink:#eef8ff}
*{box-sizing:border-box}html{color-scheme:dark;background:var(--navy)}body{margin:0;color:var(--ink);font-family:Arial,'Yu Gothic',Meiryo,sans-serif;touch-action:manipulation}button,a,input,select{-webkit-tap-highlight-color:transparent;font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid white;outline-offset:5px}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:26px;height:26px;flex:none;fill:currentColor}.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1px solid #aaa6f4;border-radius:13px;background:linear-gradient(180deg,#382071e8,#111737ed);box-shadow:inset 0 0 0 3px #a987ff20,inset 0 1px 10px #ddbdff30,0 0 10px #7138dd50;color:white;font-size:14px;font-weight:800;text-decoration:none;letter-spacing:.04em;transition:box-shadow .18s,filter .18s,transform .18s}.btn:hover{filter:brightness(1.17);box-shadow:inset 0 0 0 3px #b889ff30,0 0 20px #9652ff90}.btn:active{transform:translateY(1px)}.btn.primary{border:2px solid #ffb9f1;background:linear-gradient(180deg,#ed21c7,#a800a7 55%,#770a8d);box-shadow:inset 0 0 0 3px #ff6cdb70,inset 0 3px 15px #fff5,0 0 7px #ff72df,0 0 23px #ea14c76b}.menu{display:grid;gap:11px;margin-top:22px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;color:#c9dcff;font-family:Georgia,serif;font-size:13px;letter-spacing:.32em}.eyebrow::before,.eyebrow::after{content:'✦';color:#ceaeff;font-size:12px}.subtitle{font-family:Georgia,serif;font-size:12px;letter-spacing:.24em;color:#d2ccf4}h2{font-size:clamp(25px,3vw,39px);margin:12px 0 20px;text-shadow:0 0 20px #a383ff66}p{line-height:1.8}label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #a288de35;font-size:14px}input[type=checkbox]{width:23px;height:23px;accent-color:var(--pink)}input[type=range]{accent-color:var(--pink)}select{max-width:60%;padding:8px;border-radius:8px;background:#161832;border:1px solid #a694df}.volume-control{display:grid;grid-template-columns:82px minmax(0,1fr) 42px;gap:10px}.volume-control input{width:100%;min-width:0}.volume-control output{text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--cyan)}
/* Allow one-finger page scrolling, but not browser pinch/double-tap zoom. */
html, body { touch-action: pan-x pan-y; }
input[type="range"] { touch-action: none; }
@media (pointer: coarse) { select { font-size: 16px; } }
/* Apply at scroll containers too; iPhone must not inherit pinch-zoom here. */
html, body, .screen, .panel { touch-action: pan-y; }
.board, .card, .card * { touch-action: none; }