/* Tile Trio Match: the screens, the tiles and the tray. */
body{background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,var(--bg) 60%,#E2E8EF 100%) fixed}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.home .title{font-size:clamp(2.4em,10vw,4.2em)}
.hero{position:relative;width:15em;height:7.4em;flex:none}
.hero .tile{transition:none}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em;max-width:22em}
.links{display:flex;gap:.2em .4em;justify-content:center;flex-wrap:wrap}
@media (max-height:520px){.hero{display:none}.home{gap:.5em}.home .title{font-size:2.4em}}

/* the game: bar, stage (board + tray), dock */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.5em,env(safe-area-inset-top)) .8em .3em;position:relative;z-index:5}
.bar-spacer{width:3em;min-width:44px}
.level-pill{min-width:8.2em;display:flex;flex-direction:column;align-items:center;background:var(--bg-hi);border:1px solid var(--hair);border-radius:999px;padding:.3em 1.4em;line-height:1.15;box-shadow:0 2px 8px rgba(23,33,43,.06)}
.level-pill span{font-weight:800;font-size:1.05em}
.level-pill small{color:var(--ink-soft);font-size:.78em}
.felt{flex:1;position:relative;min-height:0;min-width:0}
.stage{position:absolute;inset:0;z-index:0;isolation:isolate;outline:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;overflow:hidden}
.dock{display:flex;justify-content:center;gap:.6em;padding:.4em .6em max(.8em,env(safe-area-inset-bottom));position:relative;z-index:5}
.jewel.tool{width:auto;height:3em;min-height:48px;border-radius:999px;padding:0 1em 0 .85em;display:inline-flex;gap:.4em;align-items:center;font-weight:700;font-size:.95em;position:relative}
.jewel.tool svg{width:1.25em;height:1.25em}
.jewel.tool span{white-space:nowrap}
#game ~ .toast,.toast{bottom:auto;top:max(4.6em,calc(env(safe-area-inset-top) + 4em))}
.badge{font-style:normal;font-size:.78em;min-width:1.6em;height:1.6em;line-height:1.6em;border-radius:999px;background:var(--accent);color:#fff;text-align:center;padding:0 .35em}
.jewel.tool:disabled .badge{background:var(--ink-dim)}
@media (max-width:420px){.jewel.tool{padding:0 .7em 0 .6em;gap:.3em}.dock{gap:.4em}}
@media (max-width:360px){.jewel.tool span{display:none}}

/* a short, wide window: bar on the left, dock on the right, the stage between */
html.wide #game{flex-direction:row}
html.wide .bar{flex-direction:column;justify-content:flex-start;padding:max(.6em,env(safe-area-inset-top)) .3em .6em max(.6em,env(safe-area-inset-left))}
html.wide .bar-spacer{display:none}
html.wide .level-pill{border-radius:1em;padding:.4em .6em}
html.wide .dock{flex-direction:column;justify-content:center;padding:.6em max(.6em,env(safe-area-inset-right)) .6em .3em}
html.wide .jewel.tool{justify-content:flex-start}

/* the tray: seven wells on a white shelf */
.tray{position:absolute;background:var(--bg-hi);border:1px solid var(--hair);border-radius:1em;box-shadow:0 6px 18px rgba(23,33,43,.1);display:flex}
.tray i{position:absolute;border-radius:.5em;background:#E9EEF3;box-shadow:inset 0 2px 4px rgba(23,33,43,.1)}
.tray.full{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.25),0 6px 18px rgba(23,33,43,.1)}
.tray.warn i:last-child{background:#FBE3E4}

/* a tile: ivory face, a warm side under it; its body is .tb so the place can glide */
.tile{position:absolute;left:0;top:0;width:var(--tw);height:var(--th);transform-origin:0 0;will-change:transform;
  transition:transform .22s cubic-bezier(.2,.85,.3,1)}
.stage.still .tile{transition:none}
.tb{position:absolute;inset:0;border-radius:calc(var(--tw)*.14);
  background:linear-gradient(165deg,#FFFFFF 0%,#FBF8EF 45%,#F1EBDA 100%);
  box-shadow:inset 0 calc(var(--tw)*.02) 0 #fff,0 0 0 1px rgba(90,74,40,.18),0 calc(var(--tw)*.06) 0 #DCCFAE,0 calc(var(--tw)*.1) 0 #B9A97F,
    0 calc(var(--tw)*.13) calc(var(--tw)*.16) rgba(23,33,43,.28)}
.tb svg{position:absolute;inset:7% 8%;width:84%;height:86%;display:block;pointer-events:none}
.tb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(44,58,74,.3);opacity:0;transition:opacity .18s;pointer-events:none}
.tile.blocked .tb::after{opacity:1}
.tile.free{cursor:pointer}
.tile.free:hover .tb{background:linear-gradient(165deg,#FFFFFF 0%,#FFFDF5 50%,#F6F0E0 100%)}
.tile.intray,.tile.out{pointer-events:none}
.tile.out{visibility:hidden}
.tile.cursor .tb{outline:4px solid var(--accent);outline-offset:3px}
.tile.pop .tb{animation:pop .3s ease-in forwards}
.tile.shake .tb{animation:shake .3s}
.tile.spin .tb{animation:spin .34s ease-in-out}
@keyframes pop{30%{transform:scale(1.16)}100%{transform:scale(.2);opacity:0}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes spin{50%{transform:scaleX(.1)}}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* cards */
.how p{text-align:left;margin:.45em 0;color:var(--ink)}
.how b{color:var(--accent-lo)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.4em;max-height:50vh;overflow:auto;padding:.2em}
.grid .choice{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;padding:.4em .2em}
.grid .choice small{font-size:.66em;color:#E0A100;letter-spacing:.05em}
.grid .choice.done{background:#E3F4EC;border-color:#9ED8BD}
.grid .choice.next{border:2px solid var(--accent)}
.stars{display:flex;justify-content:center;gap:.3em;margin:.1em 0 .3em}
.stars svg{width:2.6em;height:2.6em;animation:star .4s cubic-bezier(.2,1.6,.4,1) both}
.stars svg:nth-child(2){animation-delay:.15s}.stars svg:nth-child(3){animation-delay:.3s}
@keyframes star{from{transform:scale(0) rotate(-40deg);opacity:0}}
@media (max-height:400px){.card{padding:.8em 1em .7em}.card h2{font-size:1.25em;margin-bottom:.3em}.stars svg{width:1.9em;height:1.9em}.card .actions{margin-top:.4em;gap:.2em .4em;flex-direction:row;flex-wrap:wrap;justify-content:center}.card .actions .pill{padding:.45em 1.8em}.card .actions .link{min-height:38px;padding:.2em .6em}}
.card p.brand{margin:-.5em 0 .2em;font-size:.78em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}