/* House Match on the insync.homes chrome: tokens from /styles/insync.css, Inter body, Instrument Sans headings. */
:root{font-family:Inter,sans-serif;color:var(--text-primary);background:var(--void);font-synthesis:none}
body{margin:0;background:var(--void);color:var(--text-primary);font-family:Inter,sans-serif;line-height:1.5}
main{width:min(100% - 24px,560px);margin:0 auto;padding-top:104px}
button{font:inherit;cursor:pointer;min-height:44px;border:1px solid var(--border-gold);border-radius:10px;background:var(--obsidian);color:var(--text-primary);padding:10px 14px;font-weight:600}
button:hover{background:var(--slate);border-color:var(--gold)}button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.intro{text-align:center;margin:0 0 14px}.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2.5px;font-weight:600;color:var(--gold)}
h1{font-family:Inter,sans-serif;font-size:40px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin:6px 0 4px;line-height:1.1;color:var(--white)}h1 span{color:var(--gold)}
.intro p{font-size:14px;margin:0;color:var(--text-secondary)}
.settings{display:flex;justify-content:center;align-items:center;gap:14px;font-size:11px;color:var(--text-secondary);margin:8px 0 12px}.settings button{border:0;background:transparent;font-size:11px;padding:8px;color:var(--text-secondary);min-height:36px}.settings button:hover{color:var(--gold);background:transparent}.settings label{display:flex;align-items:center;gap:5px;min-height:36px}.settings input{accent-color:var(--gold)}
.stages{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:0 0 6px}
.stage{min-height:44px;padding:4px 0;border-radius:8px;border:1px solid var(--border-gold);background:var(--obsidian);color:var(--text-secondary);font-size:13px;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.stage b{font-weight:700}.stage.done{color:var(--gold)}.stage.active{background:var(--gold);border-color:var(--gold);color:var(--obsidian)}.stage.active .chip-stars{color:var(--obsidian)}.stage:disabled{opacity:.35}.stage .chip-stars{font-size:8px;min-height:9px;letter-spacing:0}
#level-name{text-align:center;font-size:12px;color:var(--text-secondary);margin:0 0 10px;font-weight:600}
.game{background:var(--obsidian);border:1px solid var(--gold);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.45);padding:14px;overflow:hidden}
.hud{display:flex;justify-content:space-between;align-items:center;color:var(--white);padding:0 6px 10px}.key-count{display:flex;align-items:center;gap:10px}.key{font-size:44px;color:var(--gold);line-height:1}
.key svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.result-icon svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hud small{display:block;letter-spacing:1.5px;font-size:11px;font-weight:700;color:var(--text-secondary);font-family:'JetBrains Mono',monospace}.hud strong{display:block;font-size:29px;line-height:1.2}.hud strong>span{font-size:16px;font-weight:normal;color:var(--text-secondary)}.hud b{font-weight:700}
.moves{background:var(--gold);color:var(--obsidian);border-radius:10px;padding:7px 13px;text-align:center}.moves strong{font-size:25px;line-height:1}.moves small{color:var(--obsidian);font-size:10px;letter-spacing:1px;margin-top:4px;opacity:.8}
.progress{height:5px;background:var(--graphite);border-radius:4px;margin:0 6px 8px;overflow:hidden}.progress div{height:100%;width:0;background:var(--gold);transition:width .25s}
.board{position:relative;aspect-ratio:1;width:100%;border-radius:12px;overflow:hidden;background:var(--obsidian)}canvas{width:100%;height:100%;display:block}#tiles{position:absolute;inset:0}
.tile{position:absolute;background:transparent!important;border:0;padding:0;min-height:0;border-radius:8px;touch-action:manipulation}.tile .symbol{position:absolute;bottom:4%;right:7%;font-size:clamp(9px,2vw,12px);color:#24221f;line-height:1;opacity:.8}
.tile.hint{outline:3px solid var(--gold-bright);outline-offset:-3px;animation:hint 1.4s ease-in-out infinite}.tile.selected{outline:3px solid var(--gold);outline-offset:-3px;background:rgba(212,168,75,.18)!important}.tile:focus-visible{outline:3px solid #fff!important;outline-offset:-3px}.tile:disabled{opacity:1}
#message{font-size:14px;font-weight:600;line-height:1.4;text-align:center;min-height:36px;color:var(--white);margin:0 0 8px;display:flex;align-items:center;justify-content:center}
.tools{display:flex;gap:7px}.tools button{flex:1;font-size:12px;padding:9px 7px;white-space:nowrap;background:transparent;border:1px solid var(--gold);color:var(--gold)}.tools button:hover{background:var(--gold-dim)}.tools button:first-child{flex:1.45}
.bottom{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin:14px 5px 8px}#best{color:var(--gold);font-weight:700}
.note{text-align:center;font-size:11px;color:var(--text-dim);line-height:1.5;margin:8px 0}
#loading,#error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--obsidian);color:var(--text-primary);text-align:center;padding:25px;z-index:3}progress{width:180px;accent-color:var(--gold);margin-top:20px}
#finish{overflow:auto;position:absolute;inset:0;background:rgba(8,7,13,.86);display:flex;align-items:center;justify-content:center;z-index:4;padding:15px}
.result-card{background:var(--obsidian);border:1px solid var(--gold);border-radius:18px;text-align:center;padding:22px;max-width:380px;box-shadow:0 8px 30px rgba(0,0,0,.5);color:var(--text-primary)}
.result-icon{color:var(--gold);font-size:50px;line-height:1;margin-bottom:12px}
h2{font-family:'Instrument Sans',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.5px;margin:10px 0;color:var(--white)}
.result-card p{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:10px 0 16px}
.primary{background:var(--gold);color:var(--obsidian);width:100%;border:0}.primary:hover{background:var(--gold-bright)}
.text{border:0;background:transparent;font-size:12px;text-decoration:underline;font-weight:normal;color:var(--text-secondary)}.text:hover{background:transparent;color:var(--gold)}
#consult{display:block;font-size:12px;margin:12px 0 2px;color:var(--gold);font-weight:700}
#result-score{margin:4px 0 2px}#result-stars{font-size:40px;line-height:1;color:var(--gold);letter-spacing:4px}#result-points{display:block;font-family:'Instrument Sans',sans-serif;font-size:26px;margin-top:6px;color:var(--white)}#result-score small{display:block;font-size:11px;color:var(--text-secondary);margin-top:3px;min-height:0}
.result-row{display:flex;gap:7px;margin-top:8px}.result-row button{flex:1;font-size:12px;padding:9px 7px}#share-note{font-size:11px!important;margin:8px 0 0!important}.chip-stars{font-style:normal;color:var(--gold);letter-spacing:1px;white-space:nowrap}
.crumb{position:static;background:none;border:0;padding:0;backdrop-filter:none;width:auto;z-index:auto;font-size:11px;color:var(--text-dim);text-align:center;margin:0 0 8px}.crumb a{color:var(--text-secondary)}
.about{margin:26px auto 30px;color:var(--text-secondary);font-size:14px;line-height:1.65}.about h2{font-family:'Instrument Sans',sans-serif;font-size:24px;letter-spacing:-.3px;margin:26px 0 8px;color:var(--white)}.about h3{font-size:15px;margin:16px 0 4px;color:var(--text-primary)}.about p,.about li{margin:6px 0}.about ol,.about ul{padding-left:20px}.about a{color:var(--gold);font-weight:600}.about section{border-top:1px solid var(--border-dark);padding-top:6px}.about section:first-child{border:0}
@keyframes hint{50%{outline-color:var(--white)}}
@media(max-width:600px){#finish{position:fixed;padding:12px}.result-card{margin:auto;width:100%}main{padding-top:84px}.intro{margin:0 0 8px}h1{font-size:30px}.intro p{font-size:12px}.stages{gap:3px}.stage{font-size:12px;border-radius:7px}#level-name{font-size:11px;margin-bottom:7px}.game{padding:10px;border-radius:14px}.hud{padding:0 3px 8px}.hud strong{font-size:25px}.key{font-size:35px}.moves{padding:6px 10px}.moves strong{font-size:22px}.moves small{font-size:7px}.hud small{font-size:8px}.board{margin-top:3px}.tools button{font-size:11px;padding:8px 5px}#message{font-size:12px;min-height:34px;margin:5px 0}.result-card{padding:15px}.result-icon{font-size:35px;margin-bottom:6px}.result-card h2{font-size:26px}.result-card p{font-size:12px;margin:8px 0 12px}}
body.reduced *{animation:none!important;transition:none!important}

/* First play tutorial (2026-09-18): a player said she did not know how to play. The
   instruction now sits ABOVE the board, and the first visit dims everything except the
   two suggested tiles, points a hand at them, and explains in one line at the point of action. */
#tutorial{position:absolute;inset:0;z-index:2;pointer-events:none}
#tutorial .spot{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(8,7,13,.72);outline:3px solid var(--gold-bright);outline-offset:-3px;animation:hint 1.4s ease-in-out infinite}
#tutorial #spot-b{box-shadow:none}
#tutorial .hand{position:absolute;width:15%;height:15%;transform:translate(-30%,-10%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));transition:left .55s ease,top .55s ease;animation:tap 1.1s ease-in-out infinite}
#tutorial .bubble{position:absolute;left:6%;right:6%;background:var(--white);color:#08070d;border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:auto;text-align:center}
#tutorial .bubble p{margin:0 0 4px}#tutorial .bubble .text{color:#5a5670;font-size:12px;min-height:32px;padding:4px 8px}
#tutorial .bubble::after{content:"";position:absolute;left:50%;width:14px;height:14px;background:var(--white);transform:translateX(-50%) rotate(45deg)}
#tutorial .bubble.above::after{bottom:-7px}#tutorial .bubble.below::after{top:-7px}
.tools .howto{flex:1.2;background:var(--gold);color:var(--obsidian);border-color:var(--gold)}
@keyframes tap{0%,100%{transform:translate(-30%,-10%) scale(1)}50%{transform:translate(-30%,-10%) scale(.82)}}
body.reduced #tutorial .hand{animation:none;transition:none}

/* Keep the falling board visible during the practice explanation. */
#tutorial.explaining .bubble{font-size:13px;left:3%;right:3%;padding:10px}
#practice-next{background:#d4a84b;color:#08070d;min-height:40px;margin:4px;font-size:12px}
.scoring{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:10px 0 16px}
.scoring summary{cursor:pointer;color:var(--gold);padding:8px 0}.scoring p{margin:6px 0}

.board.resolving .symbol{visibility:hidden}

#tutorial.explaining .bubble::after{display:none}