@charset "UTF-8";
/* Hold/drag a control without selecting its label (including nested SVG/text).
   Reading text and editable fields retain normal selection and copy behavior. */
:where(button,button *,[role="button"],[role="button"] *,summary,summary *,
  .primary,.support-link,.share-actions a,.toy-workbench,.toy-workbench *,
  .toy-controls,.toy-controls *,.canvas-tools,.canvas-tools *,
  .board-controls,.board-controls *,.board-stage,.board-stage *,
  .board-viewport,.board-viewport *,.play-canvas,.acoustic-kit,.acoustic-kit *) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:where(button img,button svg,.toy-object,.toy-object *) { -webkit-user-drag: none; }
:is(input:not([type="range"]),textarea,[contenteditable="true"],[contenteditable="true"] *) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
:root{--paper:#fffdf5;--ink:#29362f;--muted:#68736a;--orange:#ed784b;--green:#246951;--line:#dfdfd3;--font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:5px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}.wrap{width:min(1120px,calc(100% - 80px));margin-inline:auto}.header{height:108px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;font-size:21px;font-weight:900;letter-spacing:.02em}.brand-icon{background:var(--orange);color:var(--paper);display:grid;place-items:center;width:45px;height:45px;border-radius:15px;font-size:39px;line-height:1}.brand-small{font-size:14px;margin-left:3px}.sound{border:1px solid var(--line);background:transparent;border-radius:99px;padding:11px 17px;font-size:13px;display:flex;gap:9px;align-items:center}.sound[aria-pressed=true]{background:#e5edde;border-color:#abc5ad}.hero{min-height:483px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:25px;padding:30px 0 64px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:700;display:flex;gap:8px;align-items:center}.eyebrow>span{width:7px;height:7px;background:var(--green);border-radius:50%}h1{font-size:clamp(32px,4.4vw,54px);line-height:1.5;letter-spacing:.035em;margin:22px 0 17px;font-weight:900}h1>span{color:var(--green)}.hero-description{line-height:2.1;color:var(--muted);font-size:15px;margin:0 0 27px}.primary{display:inline-flex;align-items:center;gap:41px;background:var(--green);color:white;padding:16px 25px;border-radius:99px;font-weight:700;font-size:14px;transition:transform .2s}.primary:hover{transform:translateY(-3px)}.hero-note{font-size:11px;color:var(--muted);margin:14px 0 0 13px}.hero-art{height:360px;position:relative;background:radial-gradient(#d5d6c6 1px,transparent 1px);background-size:19px 19px;border-radius:50%}.orbit{position:absolute;border:1px solid #dadccf;border-radius:50%;inset:25px 55px;transform:rotate(-28deg)}.orbit-two{inset:57px 20px;transform:rotate(36deg)}.tile{position:absolute;box-shadow:0 14px 0 #29362f0a}.tile-smile{width:176px;height:176px;background:#eec85a;border-radius:52px;left:39%;top:72px;transform:rotate(12deg);display:flex;align-items:center;flex-direction:column;justify-content:center}.eyes{display:flex;gap:34px}.eyes i{height:17px;width:10px;border-radius:50%;background:var(--ink)}.smile{width:47px;height:29px;border:5px solid var(--ink);border-top:0;border-radius:0 0 45px 45px;margin-top:15px}.tile-dice{width:114px;height:114px;background:#b3cbb9;border-radius:28px;left:9%;top:40px;transform:rotate(-18deg);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:22px;gap:5px}.tile-dice i{border-radius:50%;background:var(--green)}.tile-dice i:nth-child(2){grid-area:1/3}.tile-dice i:nth-child(3){grid-area:2/2}.tile-dice i:nth-child(4){grid-area:3/1}.tile-dice i:nth-child(5){grid-area:3/3}.tile-key{width:149px;height:83px;background:var(--orange);color:#4c342a;border:2px solid #d46b41;border-bottom:9px solid #ce6037;border-radius:22px;left:15%;top:217px;transform:rotate(-9deg);font-size:23px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:13px}.art-star{position:absolute;right:8%;top:1px;font-size:76px;color:var(--orange);transform:rotate(14deg)}.art-spark{position:absolute;left:48%;top:285px;font-size:40px;color:var(--green)}.art-caption{position:absolute;right:0;bottom:6px;font-size:11px;letter-spacing:.08em;transform:rotate(-5deg)}.playground{padding-top:40px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section-heading .eyebrow{color:var(--green);font-size:10px;margin:0 0 12px}h2{font-size:25px;letter-spacing:.02em;margin:0}.section-note{color:var(--muted);font-size:12px}.tools{display:flex;align-items:center;justify-content:space-between;gap:20px}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{border:0;background:transparent;color:var(--muted);border-radius:99px;padding:10px 18px;font-size:13px;font-weight:700}.filter.active{background:var(--ink);color:white}.filter:hover:not(.active){background:#eaeade}.search{display:flex;align-items:center;border-bottom:1px solid #c5cbbb;gap:8px;width:200px;padding:5px 0}.search>span:first-child{font-size:27px}.search input{border:0;background:transparent;width:100%;min-width:0;padding:9px 0;color:var(--ink);font-size:12px}.result-count{color:var(--muted);font-size:11px;margin:18px 0 14px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px 23px}.card{min-width:0}.card-art{height:186px;border-radius:18px;position:relative;overflow:hidden;display:grid;place-items:center}.card-badge{position:absolute;top:13px;left:13px;background:#fff9;padding:5px 10px;border-radius:99px;font-size:10px;font-weight:700}.card-art .art{font-size:72px;line-height:1;filter:drop-shadow(0 8px 0 #29362f13);transition:transform .25s}.card:hover .art{transform:rotate(-6deg) scale(1.06)}.card-art.bell-art{background:#eed9bd}.card-art.names-art{background:#e8d7df}.card-art.drum-art{background:#c9dcd5}.card-art.board-art{background:#d8dfc1}.card-art.light-art{background:#d4d9e7}.card-art.vacuum-art{background:#ecd8c6}.bell-mini{background:#faf8ed;width:65px;height:104px;border-radius:17px;box-shadow:5px 8px 0 #c3b5a3;display:grid;place-items:center;border:1px solid #c7c1b3}.bell-mini:after{content:"";width:33px;height:33px;border:4px solid #a3a99b;border-radius:50%;background:#d2d7c8}.names-mini{font-size:47px!important;letter-spacing:-11px;padding-right:10px;color:#a75c77}.board-mini{width:104px;height:104px;background:repeating-conic-gradient(#61826b 0% 25%,#f5f4e5 0% 50%) 0/52px 52px;border:7px solid #436750;border-radius:8px;display:grid;place-items:center}.board-mini:after{content:"●";font-size:52px;color:#263d31;line-height:1}.light-mini{font-size:100px!important;color:#5c6a9b;transform:rotate(-20deg);text-shadow:18px 2px 0 #f5edce}.card-info{padding:16px 3px 0}.card-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.05em}.ready{color:var(--green)}.card h3{font-size:17px;margin:9px 0 8px}.card-description{font-size:12px;color:var(--muted);line-height:1.9;margin:0;min-height:46px}.card-action{margin-top:12px;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:4px 0 7px;font-weight:700;font-size:12px;display:flex;justify-content:space-between;width:100%}.card-action:disabled{color:#777d70;border-color:var(--line);font-weight:400}.making{display:flex;align-items:center;gap:20px;border:1px dashed #bfc7b3;border-radius:16px;margin-top:39px;padding:24px 29px}.making>span:first-child{font-size:33px;color:var(--green)}.making h3{font-size:15px;margin:0 0 6px}.making p{color:var(--muted);font-size:12px;line-height:1.9;margin:0}.making-flower{margin-left:auto;color:#b5c3a5;font-size:48px}.mobile-break{display:none}.about{display:flex;justify-content:space-between;align-items:center;padding-top:66px;padding-bottom:66px}.about>p{font-size:23px;font-weight:700;line-height:1.8;margin:0}.about>div{font-size:12px;line-height:2.2;color:var(--muted);padding-right:25px}.footer{border-top:1px solid var(--line);padding-top:24px;padding-bottom:30px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.footer-brand{font-weight:700}.empty{text-align:center;padding:45px 15px}.empty>span{font-size:50px}.empty h3{font-size:16px}.empty p{color:var(--muted);font-size:13px}.empty button,.dialog-sound{background:transparent;border:1px solid #bdc7b4;padding:10px 17px;border-radius:99px;color:var(--green)}dialog{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:26px;border:1px solid var(--line);border-radius:25px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 24px 100px #20352e33}dialog::backdrop{background:#23322c80;backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.close{border:0;background:transparent;font-size:28px;color:var(--ink);width:40px;height:40px}.dialog-header .eyebrow{font-size:10px}dialog>p{font-size:13px;color:var(--muted);line-height:1.9}.bell-wall{background:#eadbc4;border-radius:18px;padding:30px;margin-top:21px}.bell{width:94px;height:145px;border:1px solid #bbb9a9;border-radius:21px;background:#f9f8ef;box-shadow:6px 9px 0 #b5a78f;display:flex;align-items:center;flex-direction:column;margin:auto;padding:16px;gap:9px;color:#78836d}.bell-light{width:6px;height:6px;background:#b1bb8c;border-radius:50%}.bell-symbol{font-size:52px;line-height:1}.bell-label{font-size:9px;letter-spacing:.2em}.bell:active,.bell.ringing{transform:translate(3px,4px);box-shadow:3px 5px 0 #b5a78f}.bell.ringing .bell-light{background:#eb9b36;box-shadow:0 0 10px #eb9b36}.bell-status{min-height:26px}.dialog-sound{font-size:12px}.skip{position:fixed;top:-70px;left:15px;background:var(--green);color:white;padding:15px;z-index:10}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:1500px){.hero{min-height:530px}}@media(max-width:850px){.wrap{width:calc(100% - 44px)}.brand{font-size:18px}.brand-small{font-size:12px}.hero{gap:0;grid-template-columns:1.15fr 1fr}.hero-art{transform:scale(.88);transform-origin:center right}.tile-smile{left:32%}.art-caption{font-size:10px;right:-15px}.section-note{display:none}.filter{padding:10px 12px}.search{width:170px}.cards{gap:28px 16px}.card-art{height:160px}.about>div{padding:0;max-width:47%}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.header{height:85px}.brand{font-size:17px;gap:9px}.brand-icon{width:35px;height:35px;font-size:31px;border-radius:11px}.brand-small{display:block;font-size:10px;margin-left:0;margin-top:1px}.sound{padding:9px 12px;font-size:11px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:24px 0 30px}.hero-copy{z-index:1}h1{font-size:35px;margin-top:18px;line-height:1.55}.hero-description{font-size:13px}.primary{padding:14px 21px;font-size:13px}.hero-note{font-size:10px}.hero-art{height:255px;width:310px;max-width:100%;transform:scale(.85);align-self:center;margin-top:6px;margin-bottom:-24px;transform-origin:center}.tile-smile{width:138px;height:138px;left:44%;top:62px;border-radius:40px}.tile-dice{width:98px;height:98px;left:5%;top:20px;padding:18px}.tile-key{top:159px;left:7%;width:137px;height:76px}.art-star{top:-15px;right:0;font-size:65px}.art-spark{top:209px;left:62%;font-size:35px}.art-caption{right:-10px;bottom:-14px}.orbit{inset:0 30px}.orbit-two{inset:30px 0}.playground{padding-top:28px}.section-heading{margin-bottom:20px}h2{font-size:21px}.tools{flex-direction:column;align-items:stretch;gap:15px}.filters{gap:3px;justify-content:space-between}.filter{font-size:12px;padding:9px 12px}.search{width:100%}.search input{font-size:13px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 13px}.card-art{height:145px;border-radius:13px}.card-badge{top:9px;left:9px;font-size:9px;padding:4px 7px}.card-art .art{font-size:58px}.card h3{font-size:14px;line-height:1.6;margin:8px 0 5px}.card-info{padding:12px 1px 0}.card-meta{font-size:9px;gap:4px;flex-wrap:wrap}.card-description{font-size:11px;min-height:63px}.card-action{font-size:11px}.bell-mini{transform:scale(.8)}.board-mini{transform:scale(.8)}.making{padding:20px 16px;gap:13px}.making-flower{display:none}.making h3{font-size:13px}.making p{font-size:11px}.mobile-break{display:block}.about{padding-block:38px;display:block}.about>p{font-size:20px;margin-bottom:17px}.about>div{max-width:none;font-size:11px}.footer{font-size:10px;gap:15px;flex-wrap:wrap}dialog{padding:20px}.empty h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* The receiver casing and controls stay sharp, even when its picture is coarse. */
:root { --crt: .15; --crt-glow: .23px; --screen-brightness: 1.08; }
body { border: 8px solid #6b7358; min-height: 100vh; }
.filter-definitions { position: fixed; inset: 0 auto auto 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.header { height: 98px; }
.brand-icon { background: #657650; border-radius: 8px; color: #eee4bf; }
.header-right { display: flex; align-items: center; gap: 22px; }
.station-id { font: 10px/1.5 monospace; color: #74785c; letter-spacing: .08em; }
.display-settings { border: 1px solid #c2c4ac; border-radius: 5px; background: #eeeddf; }
.display-settings summary { padding: 13px 17px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.display-settings summary::-webkit-details-marker { display: none; }
.display-settings summary:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.display-settings summary>span:first-child { display: flex; align-items: center; gap: 9px; }
.signal-light { width: 6px; height: 6px; background: #657650; box-shadow: 0 0 0 3px #dfe2cc; }
.settings-hint { color: #74785c; font: 10px monospace; letter-spacing: .08em; }
.settings-body { display: flex; align-items: center; gap: 30px; padding: 9px 18px 5px; border-top: 1px solid #d9dac7; }
.setting { flex: 1; min-width: 0; }
.setting label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.setting output { background: #394c3c; color: #e4e6c3; padding: 4px 8px; min-width: 45px; text-align: center; font: 11px monospace; border-radius: 2px; }
.setting input { width: 100%; height: 28px; margin: 8px 0 0; accent-color: #657650; cursor: pointer; }
.setting p { font-size: 10px; color: #6b715d; margin: 0 0 8px; }
#effects-off { background: #f8f6ef; border: 1px solid #b7bda4; border-bottom: 3px solid #a8ae96; border-radius: 4px; padding: 10px 13px; color: #46543d; font-size: 11px; }
#effects-off:active { transform: translateY(2px); border-bottom-width: 1px; }
.settings-note { margin: 0; padding: 3px 18px 12px; color: #74785c; font-size: 10px; line-height: 1.8; }
.hero { min-height: 440px; padding-top: 32px; padding-bottom: 42px; }
.hero h1 { font-size: clamp(32px,4.4vw,52px); }
.hero-description { font-size: 14px; }
.receiver-art { position: relative; width: 100%; }
.receiver-art img { width: 100%; height: auto; display: block; }
.receiver-caption { position: absolute; right: 13%; bottom: 3%; font-size: 11px; color: #72765c; transform: rotate(-4deg); }
.section-heading .eyebrow { letter-spacing: .1em; }
.primary { border-radius: 5px; background: #526748; box-shadow: 0 3px 0 #344a32; }
.primary:hover { transform: translateY(-2px); }
.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #344a32; }
.card-art { border-radius: 12px; border: 1px solid #29362f0c; }
.card-badge { border-radius: 3px; font-family: monospace; }
.card-art::after { content: attr(data-channel); position: absolute; bottom: 12px; right: 12px; color: #29362f80; font: 10px monospace; letter-spacing: .08em; }
.making { border-radius: 5px; }
.screen-surface, #bell-dialog { text-shadow: var(--crt-glow) 0 #b75e4930, calc(-1 * var(--crt-glow)) 0 #4b816c30; }
/* Bound each filter surface. A whole page (especially on a high-DPI phone)
   can exceed the GPU's filter texture size and lose its tiny sampling grid.
   Keep the real DOM interactive; never filter both a parent and its child. */
:root { --picture-filter: brightness(var(--screen-brightness)); }
html[data-pixel="on"] { --picture-filter: brightness(var(--screen-brightness)) url(#pixel-screen); }
:is(.hero, .about) > *,
.playground > :not(.cards), .cards > .card,
#bell-dialog > *, .game-dialog > :not(#game-content), #game-content > * {
  filter: var(--picture-filter);
}
.crt-overlay { position: fixed; inset: 8px; z-index: 100; pointer-events: none; opacity: var(--crt); border-radius: 18px; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, #20352945 2px, #20352945 3px), repeating-linear-gradient(to right, #bb67400d 0px, #bb67400d 1px, #4a8c560d 1px, #4a8c560d 2px, #455d8a0d 2px, #455d8a0d 3px); box-shadow: inset 0 0 80px 12px #23332170, inset 0 0 3px 2px #28352060; }
#bell-dialog::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: var(--crt); background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, #20352945 2px, #20352945 3px); box-shadow: inset 0 0 50px #23332150; }
@media(max-width:850px) { .station-id { display: none; } .settings-body { gap: 18px; flex-wrap: wrap; } #effects-off { margin-bottom: 6px; } }
@media(max-width:600px) { body { border-width: 5px; } .header { height: 78px; } .crt-overlay { inset: 5px; border-radius: 10px; } .header-right { gap: 0; } .display-settings summary { padding: 12px; font-size: 11px; } .settings-hint { font-size: 9px; } .settings-body { padding: 12px 12px 0; gap: 12px; } .setting { flex: 1 1 40%; } .setting label { font-size: 11px; gap: 5px; } .setting p { font-size: 9px; line-height: 1.8; } .setting output { font-size: 10px; min-width: 34px; } #effects-off { padding: 7px 11px; margin-bottom: 0; } .settings-note { padding: 9px 12px 12px; font-size: 9px; } .hero { padding-top: 26px; padding-bottom: 30px; } .hero h1 { font-size: 34px; } .hero-description { font-size: 12px; } .hero-note { font-size: 9px; margin-left: 0; } .receiver-art { width: 320px; max-width: 100%; align-self: center; margin: 12px 0 -5px; } .receiver-caption { font-size: 10px; } .about>p { font-size: 19px; } }

.game-dialog { width: min(700px, calc(100% - 26px)); padding: 24px; }
.game-header-actions { display: flex; align-items: center; gap: 8px; }
.game-sound { border: 1px solid #b7bda4; background: #f9faec; color: #46543d; padding: 8px 10px; border-radius: 5px; font-size: 11px; white-space: nowrap; }
.game-sound[aria-pressed="true"] { background: #e2eaca; }
.game-intro { font-size: 13px; color: var(--muted); line-height: 1.9; margin: 17px 0 22px; }
.game-note { font-size: 11px; color: var(--muted); line-height: 1.9; margin: 18px 0 0; }
.game-button { border: 1px solid #a8b598; border-bottom-width: 3px; background: #e8ebd9; border-radius: 5px; color: #364e37; padding: 11px 18px; font-weight: 700; font-size: 12px; }
.game-button:active { border-bottom-width: 1px; transform: translateY(2px); }
.friend-form { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 12px; align-items: center; text-align: left; }
.friend-form label { font-size: 12px; font-weight: 700; }
.friend-form input { margin-top: 8px; width: 100%; border: 1px solid #c8cbb7; border-radius: 5px; padding: 12px; background: #fffdf6; color: var(--ink); min-width: 0; }
.friend-plus { text-align: center; padding-top: 22px; color: #a67a84; }
.friend-form button { grid-column: 1 / -1; margin-top: 6px; }
.friend-result { background: #eadee1; border-radius: 12px; margin-top: 20px; padding: 20px; }
.friend-result strong { font-size: 58px; color: #935871; }
.friend-result p { font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.friend-receiver { margin-top: 20px; padding: 23px 15px; border: 1px solid #d9bdc7; border-radius: 12px; background: #f4e8ec; min-height: 170px; }
.friend-heart { color: #aa617c; font-size: 56px; line-height: 1.2; width: fit-content; margin: 0 auto 13px; text-shadow: 0 3px 0 #8e4e6818; }
.friend-heart.beating { animation: friend-heartbeat 620ms ease-in-out; }
.friend-phase { margin: 0 0 14px; min-height: 22px; color: #84536a; font-size: 12px; line-height: 1.8; }
.friend-signal { display: flex; gap: 9px; justify-content: center; }
.friend-signal i { width: 6px; height: 6px; background: #d6c4cb; border-radius: 2px; }
.friend-signal i.lit { background: #a3617b; }
.friend-form button:disabled { opacity: .75; cursor: wait; }
.friend-form input:disabled { color: #6b715d; background: #eeede4; opacity: 1; }
.friend-result:not([hidden]) { animation: friend-reveal 260ms ease-out; }
@keyframes friend-heartbeat { 0%,35%,75%,100% { transform: scale(1); } 14% { transform: scale(1.15); } 50% { transform: scale(1.10); } }
@keyframes friend-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.drum-status { font-size: 12px; color: var(--muted); min-height: 24px; line-height: 1.8; }
.board-status { font-weight: 700; font-size: 14px; line-height: 1.7; min-height: 26px; }
.board-score { padding: 8px 0 18px; font-size: 16px; }
.reversi-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; background: #294b38; border: 6px solid #294b38; border-radius: 6px; width: min(100%, 380px, 48dvh); margin: auto auto 18px; }
.square { aspect-ratio: 1; border: 0; padding: 0; background: #73967a; position: relative; min-width: 0; display: grid; place-items: center; }
.square[aria-disabled="true"] { cursor: default; }
.square:focus-visible { outline: 3px solid #f0d77f; outline-offset: -3px; z-index: 1; }
.square.piece-1::after, .square.piece-2::after { content: ""; width: 78%; height: 78%; border-radius: 50%; background: #26372d; box-shadow: 1px 3px 0 #20362955; }
.square.piece-2::after { background: #f4f0dd; }
.square.legal::before { content: ""; width: 14%; height: 14%; border-radius: 50%; background: #e6e8c0; }
.square.legal:hover { background: #8caa86; }
.play-canvas { display: block; width: min(100%, 76.8dvh); height: auto; margin: auto; border-radius: 12px; border: 2px solid #b9c0a4; touch-action: none; cursor: crosshair; }
.canvas-tools { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 17px; }
.dust-status { font-size: 11px; color: var(--muted); line-height: 1.8; }
.vacuum-canvas { background: #ecddbe; border-color: #c9b99a; box-shadow: inset 0 2px 5px #69593b15; cursor: grab; }
.vacuum-canvas:active { cursor: grabbing; }
.vacuum-power[aria-pressed="false"] { background: #e5e3d8; color: #717567; }
.board-stage { position: relative; }
.board-stage:has(> .victory-panel) { min-height: 300px; }
.victory-panel { position: absolute; inset: 0; margin: auto; min-height: 275px; border: 2px solid #bfa168; border-radius: 16px; background: #fff9e9f5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; z-index: 3; box-shadow: 0 10px 35px #26372d33; overflow: hidden; animation: victory-enter 500ms cubic-bezier(.15,.8,.2,1); }
.victory-panel .eyebrow { margin: 0; color: #927447; }
.victory-panel h3 { font-size: clamp(26px,5vw,42px); margin: 0; color: #405c40; z-index: 1; }
.victory-panel h3:focus { outline: none; }
.victory-medal { font-size: 75px; line-height: 1.15; color: #314e38; text-shadow: 3px 4px #bba46c55; z-index: 1; }
.victory-detail { margin: 0 0 5px; font-size: 16px; font-weight: 700; z-index: 1; }
.victory-panel button { z-index: 1; }
.victory-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.victory-confetti i { position: absolute; left: var(--confetti-x); top: -15px; width: 7px; height: 14px; background: #cfa059; animation: confetti-fall 1.5s var(--confetti-delay) ease-out both; }
.victory-confetti i:nth-child(3n) { background: #7b9b75; }.victory-confetti i:nth-child(3n+1) { background: #bb8793; }
@keyframes victory-enter { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes confetti-fall { from { transform: translateY(-20px) rotate(0); opacity: 1; } to { transform: translateY(420px) rotate(400deg); opacity: 0; } }
@media(max-width:600px) { .victory-medal { font-size: 56px; }.victory-panel { min-height: 240px; } }
.game-rules { text-align: left; font-size: 11px; color: #65715b; border: 1px solid #d2d5c2; border-radius: 5px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.9; }
.game-rules summary { cursor: pointer; font-weight: 700; }.game-rules p { margin: 10px 0 0; }
.new-game-status { font-size: 13px; font-weight: 700; line-height: 1.8; min-height: 24px; }
.board-controls { margin-top: 20px; }
.line-board { display: grid; grid-template-columns: repeat(var(--board-size),1fr); margin: 0 auto; }
.line-cell { aspect-ratio: 1; border: 0; position: relative; padding: 0; min-width: 0; }
.tic-board { width: min(100%,320px,44dvh); gap: 5px; background: #657d61; border: 5px solid #657d61; border-radius: 8px; }
.tic-board .line-cell { background: #f1eedb; font-size: clamp(25px,7vw,46px); color: #486147; font-weight: 700; }
.tic-board .stone-2 { color: #b6776a; }
.gomoku-board { width: min(100%,480px,52dvh); border: 10px solid #d1af74; background: #e0c391; box-shadow: 0 5px 0 #b19565; border-radius: 5px; }
.gomoku-board .line-cell { background: linear-gradient(transparent calc(50% - .5px),#85724b calc(50% - .5px),#85724b calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#85724b calc(50% - .5px),#85724b calc(50% + .5px),transparent calc(50% + .5px)); }
.gomoku-board .stone-1::after,.gomoku-board .stone-2::after { content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#596557,#25352a);box-shadow:1px 2px 2px #4a3c3240; }
.gomoku-board .stone-2::after { background:radial-gradient(circle at 35% 30%,#fffdf1,#d9d8c3); }
.gomoku-board .last-move::before { content:"";position:absolute;inset:40%;background:#dc9473;border-radius:50%;z-index:1; }
.gomoku-board .last-move::after { animation: stone-place 160ms ease-out; }
.tic-board .last-move { animation: stone-place 160ms ease-out; }
@keyframes stone-place { from { opacity:.3; transform:scale(.75); } to { opacity:1; transform:scale(1); } }
.line-cell.winning-cell { box-shadow:inset 0 0 0 3px #aa8257; }.line-cell[aria-disabled=true] { cursor:default; }
.line-cell:focus-visible { outline:2px solid #386547;outline-offset:-2px;z-index:2; }
.checker-board { display:grid;grid-template-columns:repeat(8,1fr);width:min(100%,380px,48dvh);margin:auto;border:5px solid #50624b;gap:0;border-radius:4px;overflow:hidden; }
.checker-cell { aspect-ratio:1;border:0;position:relative;background:#eee9d5;min-width:0;padding:0; }.checker-cell.dark-square { background:#79916c; }
.checker-cell.checker-1::after,.checker-cell.checker-2::after { content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 35% 25%,#cf8b78,#9c5245);border:3px double #764738;box-shadow:1px 3px #52624a55; }
.checker-cell.checker-2::after { background:radial-gradient(circle at 35% 25%,#fffce8,#d0c9ab);border-color:#a59a78; }.checker-cell.crowned::before { content:"♛";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#6e572a;z-index:1; }
.checker-cell.move-option { box-shadow:inset 0 0 0 3px #f3dc87; }.checker-cell.selected-piece { box-shadow:inset 0 0 0 3px #eabe60; }.checker-cell:focus-visible { outline:3px solid #f8db89;outline-offset:-3px;z-index:2; }
.kalah-board { display:grid;grid-template-columns:1.3fr repeat(6,1fr) 1.3fr;grid-template-rows:1fr 1fr;gap:9px;padding:18px 12px;background:linear-gradient(125deg,#e0be89,#c8a46c);border:4px solid #b69260;border-radius:30px;min-height:210px;box-shadow:0 5px #9b7e53; }
.kalah-pit { position:relative;min-width:0;border:1px solid #a38153;border-radius:40%;background:#c2a06a;box-shadow:inset 0 3px 6px #654f3445,inset 0 -2px #f7d8a0;padding:4px;color:#3c4430;font-size:13px; }.kalah-store { display:flex;align-items:center;justify-content:center;border-radius:45%; }.kalah-pit strong { position:absolute;bottom:5px;left:0;width:100%;background:#eed5a69c;border-radius:10px;z-index:1;font:700 12px monospace; }.kalah-store strong { font-size:22px; }
.kalah-stones { display:flex;gap:2px;flex-wrap:wrap;justify-content:center;align-items:center;min-height:30px;margin-bottom:18px; }.kalah-stones i { width:8px;height:10px;background:var(--seed-color);border-radius:45%;box-shadow:1px 2px #71563555; }.kalah-pit:disabled { cursor:default; }.kalah-pit:not(:disabled):hover { outline:2px solid #f4dfaf; }.recent-pit { animation:seed-receive 450ms ease-out; }
@keyframes seed-receive { from { box-shadow:inset 0 0 0 4px #fff0b7; } }
.domino-chain { display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;min-height:90px;background:#dbe3cd;padding:14px 8px;border-radius:12px;border:1px solid #b9c4ab;font-size:12px;color:#657354; }.domino-hand { display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0; }.domino-hand-area { padding:20px 0 5px; }.domino-hand-area>.game-button { margin:4px; }.domino-ends { display:flex;gap:12px;justify-content:center;margin-top:14px;min-height:40px; }
.domino-tile { display:inline-flex;flex:0 0 auto;padding:4px;gap:4px;align-items:center;background:#fff9e7;border:1px solid #b9b49b;border-bottom:4px solid #b7aa86;border-radius:5px;box-shadow:1px 2px #7b866d22; }.domino-half { width:26px;height:30px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:2px; }.domino-half:first-child { border-right:1px solid #d4cbae;padding-right:5px;width:29px; }.domino-half i { border-radius:50%; }.domino-half .pip { background:#496344; }.selected-domino { outline:3px solid #6b8a56;outline-offset:3px; }.domino-tile:disabled { opacity:.5;cursor:default; }
@media(max-width:600px) { .kalah-board { gap:4px;padding:12px 6px;min-height:165px;border-radius:20px; }.kalah-stones i { width:5px;height:7px; }.kalah-stones { gap:1px; }.kalah-store strong { font-size:16px; }.gomoku-board { border-width:7px; }.game-rules { font-size:10px; }.domino-half { width:21px;height:25px; }.domino-half:first-child { width:24px; }.checker-cell.crowned::before { font-size:18px; } }
.vacuum-mini { position: relative; width: 72px; height: 34px; border-radius: 10px; background: #667f59; border: 2px solid #4b6644; box-shadow: 3px 6px 0 #8b795735, inset 0 6px 0 #a7b994; transform: rotate(-18deg); margin-top: 57px; }
.vacuum-mini::before { content: ""; position: absolute; width: 12px; height: 77px; background: linear-gradient(#d3b576 0 10%,#667f59 10% 51%,#ced0b5 51% 85%,#849477 85%); border: 2px solid #617357; border-radius: 7px; left: 27px; bottom: 14px; }
.vacuum-mini::after { content: ""; position: absolute; inset: auto 5px 3px; height: 5px; border-radius: 3px; background: #344b38; }
.game-dialog { text-shadow: var(--crt-glow) 0 #b75e4930, calc(-1 * var(--crt-glow)) 0 #4b816c30; }
.game-dialog::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: var(--crt); background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, #20352945 2px, #20352945 3px); box-shadow: inset 0 0 50px #23332150; }
@media(max-width:600px) { .game-dialog { padding: 17px; } .game-intro { font-size: 11px; margin: 14px 0 18px; } .friend-form { grid-template-columns: 1fr; gap: 10px; } .friend-plus { padding: 0; font-size: 12px; } .friend-form input { margin-top: 5px; padding: 10px; font-size: 14px; } .reversi-board { border-width: 4px; } .board-score { font-size: 14px; } .game-note { font-size: 10px; } }

/* A small instrument panel: readable turns, tactile feedback, forgiving controls. */
.game-dialog > .dialog-header, #bell-dialog > .dialog-header { position: sticky; top: -24px; z-index: 8; padding: 12px 0; background: #fffdf5; border-bottom: 1px solid #d9ddc9; }
.game-header-actions { gap: 10px; }
.game-sound, .close, .game-button, .dialog-sound { min-height: 44px; }
.game-button:disabled { opacity: .42; cursor: default; }
.board-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.undo-move { background: #edeadb; color: #53634c; }
.board-score { display: flex; gap: 12px; justify-content: center; padding: 0 0 14px; }
.score-chip { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #d8dcc8; padding: 8px 15px; border-radius: 9px; background: #f0efdf; font-size: 13px; }
.score-chip b { font: 700 21px monospace; }
.score-chip.current-player { background: #e1ebd8; border-color: #6d8a60; box-shadow: 0 2px #809673; }
.square.recent-square { box-shadow: inset 0 0 0 2px #f0d58b; }
.square.flipped-square::after { animation: stone-flip 300ms ease-out; }
@keyframes stone-flip { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
.friend-meter { width: min(260px,85%); height: 12px; margin: 12px auto 18px; border-radius: 12px; overflow: hidden; background: #e4dfcd; box-shadow: inset 0 1px 3px #746b4925; }
.friend-meter span { display: block; width: var(--friend-score); height: 100%; border-radius: inherit; background: repeating-linear-gradient(90deg,#819f79 0 8px,#d8e1bf 8px 10px); animation: signal-fill 650ms ease-out; }
@keyframes signal-fill { from { width: 0; } }
.kalah-side-label { margin: 12px 0; font-size: 11px; color: #726d4e; }
.kalah-pit:not(:disabled) { outline: 2px solid #f5e4b8; outline-offset: -3px; }
.kalah-pit:focus-visible { outline: 3px solid #385f40; }
.kalah-store::before { content: '2'; position: absolute; top: 12px; font: 700 12px monospace; color: #77633d; }
.kalah-store[data-player='1']::before { content: '1'; }
.gomoku-viewport { overflow: auto; padding-bottom: 6px; overscroll-behavior: contain; border-radius: 5px; }
.gomoku-viewport.is-zoomed { max-height: min(480px,60dvh); border: 1px solid #bfa775; }
.gomoku-viewport.is-zoomed .gomoku-board { width: 600px; max-width: none; margin: 0; }
.domino-end-label { color: #52694a; font: 700 13px monospace; background: #e9eddb; padding: 10px; border-radius: 6px; }
.domino-cover { padding: 10px 16px 18px; border: 1px dashed #a6b594; border-radius: 12px; background: #f0efdf; }
.domino-cover p { font-size: 12px; line-height: 1.9; }
.domino-hand .domino-tile { min-height: 48px; transition: transform 100ms; }
.domino-hand .selected-domino { transform: translateY(-5px); }
.domino-ends:empty { display: none; }
#bell { position: relative; }
#bell.ringing::after { content: ''; position: absolute; inset: -14px; border: 2px solid #c6a75f; border-radius: inherit; animation: bell-wave 650ms ease-out both; pointer-events: none; }
@keyframes bell-wave { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.4); opacity: 0; } }
@media(max-width:600px) {
  .game-dialog, #bell-dialog { width: calc(100% - 16px); max-width: 700px; max-height: calc(100dvh - 16px); padding: 16px; }
  .game-dialog > .dialog-header, #bell-dialog > .dialog-header { top: -16px; }
  .dialog-header .eyebrow { font-size: 8px; }
  .game-sound { font-size: 11px; }
  .friend-form input { font-size: 16px; }
  .kalah-board { gap: 4px; padding: 12px 4px; }
  .kalah-pit { min-height: 58px; }
  .kalah-pit strong { font-size: 13px; }
  .canvas-tools { gap: 8px; }
}

/* Nine-piece acoustic kit, seen from the drummer's side of the room. */
.game-dialog[data-game="drum"] { width: min(900px,calc(100% - 24px)); }
.game-dialog[data-game="drum"] .game-intro { margin: 12px 0 0; }
.acoustic-kit { position: relative; width: min(100%,740px,76dvh); aspect-ratio: 760 / 600; margin: 0 auto; isolation: isolate; background: radial-gradient(ellipse at 50% 75%,#e7e5d1,transparent 70%); }
.kit-hardware { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kit-hardware-phone { display: none; }
.kit-piece { left: var(--kit-left); top: var(--kit-top); width: var(--kit-width); height: var(--kit-height); }
.acoustic-kit button { position: absolute; border: 0; padding: 0; background: transparent; color: #3b5144; pointer-events: none; touch-action: none; -webkit-user-select: none; user-select: none; }
.acoustic-kit .kit-face { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: visiblePainted; filter: drop-shadow(1px 4px 2px #31423022); transform-origin: 50% 40%; }
.acoustic-kit button:focus-visible { outline: 2px dashed #357451; outline-offset: 2px; border-radius: 40%; }
.acoustic-kit small { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 4px; left: 50%; bottom: 0; transform: translateX(-50%); background: #fffdf2e8; padding: 3px 7px; border: 1px solid #d0d6c2; border-radius: 5px; white-space: nowrap; font-size: clamp(8px,1.2vw,11px); font-weight: 700; pointer-events: none; }
.acoustic-kit kbd { font: 700 9px monospace; color: #7c8b72; border-left: 1px solid #c3cbb5; padding-left: 4px; }
.kit-piece.kit-kick small { top: 55%; bottom: auto; background: #fffdf2b8; border: 0; }
.kit-piece.kit-high-tom small, .kit-piece.kit-low-tom small { bottom: 15%; }
.kit-piece.kit-snare small { bottom: 4%; }
.kit-piece.kit-floor-tom small { bottom: 12%; }
.kit-piece.kit-crash-left { transform: rotate(-7deg); }
.kit-piece.kit-crash-right { transform: rotate(7deg); }
.kit-piece.kit-ride { transform: rotate(-5deg); }
.kit-piece.kit-cymbal small { bottom: 3%; }
.kit-piece.kit-hat small { bottom: 0; }
.kit-pedal { left: var(--kit-left); top: 84%; width: 8%; height: 15%; z-index: 7; }
.acoustic-kit .kit-pedal small { bottom: -13px; font-size: 8px; padding: 2px 4px; }
.kit-pedal.pedal-kick { top: 82%; }
.kit-pedal.pedal-hat[aria-pressed="true"] .kit-face { transform: rotateX(25deg) translateY(-3px); }
.hat-is-open .kit-hat .kit-face { transform: translateY(-4px); }
.kit-piece.hit.kit-drum .kit-face { animation: kit-drum-hit 180ms ease-out; }
.kit-piece.hit.kit-cymbal .kit-face { animation: kit-cymbal-hit 500ms ease-out; }
.kit-pedal.hit .kit-face { animation: kit-pedal-hit 170ms ease-out; }
.kit-hit { position: absolute; width: 24%; aspect-ratio: 1; border: 2px solid #f2d57c; border-radius: 50%; left: var(--hit-x,50%); top: var(--hit-y,35%); opacity: 0; pointer-events: none; }
.kit-piece.hit .kit-hit { animation: kit-ripple 200ms ease-out; }
.drum-readout { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 20px; margin: 10px 0 14px; }
.drum-readout .drum-status { margin: 0; min-height: 0; font-size: 11px; }
.hat-status { font-size: 11px; color: #6f7b60; margin: 0; line-height: 1.8; }
.drum-guide { max-width: 600px; margin: 0 auto; }
.drum-credit { font-size: 9px; line-height: 1.8; color: #829079; margin: 14px 0 0; }
.drum-credit a { text-decoration: underline; text-underline-offset: 2px; }
@keyframes kit-drum-hit { 20% { transform: translateY(3px) scaleY(.985); filter: brightness(1.08); } }
@keyframes kit-cymbal-hit { 15% { transform: rotateX(18deg) rotate(3deg); } 40% { transform: rotateX(-10deg) rotate(-2deg); } 70% { transform: rotateX(5deg) rotate(1deg); } }
@keyframes kit-pedal-hit { 25% { transform: translateY(4px) scaleY(.92); } }
@keyframes kit-ripple { from { transform: translate(-50%,-50%) scale(.3); opacity: .7; } to { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } }
.acoustic-kit .kit-cymbal::before { content: ""; position: absolute; inset: 10% 0 18%; border-radius: 50%; pointer-events: auto; }
/* Portrait kit: use the phone's height instead of shrinking the wide stage.
   Non-overlapping button boxes include each label as a real touch target. */
@media(max-width:600px) {
  .game-dialog[data-game="drum"] { padding: 10px; width: calc(100% - 8px); max-height: calc(100dvh - 8px); border-radius: 16px; }
  .game-dialog[data-game="drum"] > .dialog-header { top: -10px; margin-bottom: 8px; }
  .game-dialog[data-game="drum"] #game-title { font-size: 21px; }
  .game-dialog[data-game="drum"] .game-intro { font-size: 11px; margin-top: 8px; }
  .acoustic-kit { width: min(100%,420px); aspect-ratio: 360 / 420; margin: 4px auto 8px; }
  .kit-hardware:not(.kit-hardware-phone) { display: none; }
  .kit-hardware-phone { display: block; }
  .acoustic-kit button { pointer-events: auto; }
  .acoustic-kit .kit-face { pointer-events: none; }
  .acoustic-kit .kit-cymbal::before { pointer-events: none; }
  .acoustic-kit small { padding: 3px 5px; font-size: 11px; line-height: 1.25; }
  .acoustic-kit kbd { display: none; }
  .kit-piece.kit-crash-left { left: 0; top: 0; width: 46%; height: 23%; transform: rotate(-5deg); }
  .kit-piece.kit-crash-right { left: 54%; top: 0; width: 46%; height: 23%; transform: rotate(5deg); }
  .kit-piece.kit-high-tom { left: 25%; top: 25%; width: 25%; height: 28%; }
  .kit-piece.kit-low-tom { left: 50%; top: 25%; width: 25%; height: 28%; }
  .kit-piece.kit-hat { left: 0; top: 30%; width: 24%; height: 20%; }
  .kit-piece.kit-ride { left: 76%; top: 30%; width: 24%; height: 20%; transform: none; }
  .kit-piece.kit-snare { left: 0; top: 56%; width: 33%; height: 31%; }
  .kit-piece.kit-kick { left: 34%; top: 53%; width: 32%; height: 35%; }
  .kit-piece.kit-floor-tom { left: 67%; top: 56%; width: 33%; height: 31%; }
  .kit-piece small, .kit-piece.kit-cymbal small, .kit-piece.kit-high-tom small,
  .kit-piece.kit-low-tom small, .kit-piece.kit-snare small, .kit-piece.kit-floor-tom small { bottom: 0; }
  .kit-piece.kit-kick small { top: 54%; bottom: auto; font-size: 10px; }
  .acoustic-kit .kit-pedal { top: 89%; width: 45%; height: 11%; min-height: 44px; border: 1px solid #b1bea3; border-bottom: 3px solid #8e9e80; border-radius: 8px; background: #e7ebd8; display: flex; align-items: center; justify-content: center; gap: 7px; }
  .kit-pedal.pedal-hat { left: 2%; }
  .kit-pedal.pedal-kick { left: 53%; }
  .acoustic-kit .kit-pedal .kit-face { width: 18px; height: 35px; flex-shrink: 0; }
  .acoustic-kit .kit-pedal small { position: static; transform: none; border: 0; background: transparent; padding: 0; font-size: 11px; }
  .kit-pedal[aria-pressed="true"] { background: #d4dfbb; border-color: #60794a; }
  .drum-readout { display: block; margin: 8px 0 10px; min-height: 43px; }
  .drum-readout .drum-status { margin-bottom: 3px; }
  .drum-credit { margin-top: 8px; }
}