:root { color-scheme:light; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --ink:#252a30; --paper:#f8fafb; --wash:#e8eef2; --accent:#49697e; --line:#aebbc4; }
:root[data-theme="raptor"] { --paper:#fffef3; --wash:#f3eed9; --accent:#c94d26; --line:#c8b991; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:linear-gradient(145deg,var(--paper),var(--wash)); }
button,select { font:inherit; }
.game-shell { width:min(56rem,calc(100% - 1.25rem)); margin:auto; padding:.75rem 0 1rem; }
.brand { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.brand img { width:3rem; height:3rem; padding:.25rem; border:1px solid var(--ink); border-radius:.65rem; box-shadow:.18rem .18rem 0 var(--accent); background:white; }
.eyebrow,.status-label { margin:0 0 .15rem; font-size:.68rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(1.75rem,5vw,2.6rem); line-height:.95; letter-spacing:-.045em; }
.subtitle { margin:.35rem 0 0; color:#5e646a; font-size:.9rem; }
.controls { display:grid; grid-template-columns:minmax(12rem,1fr) auto; gap:.75rem; align-items:end; padding:.75rem; border:1px solid var(--ink); background:rgba(255,255,255,.72); box-shadow:.3rem .3rem 0 var(--accent); }
.controls label { display:grid; gap:.3rem; font-size:.82rem; font-weight:750; }
select,#new-game { min-height:2.6rem; border:1px solid var(--ink); background:white; color:var(--ink); font-weight:750; }
select { width:100%; padding:0 .65rem; }
#new-game { padding:0 1rem; background:var(--ink); color:white; cursor:pointer; }
.instructions { margin:1rem 0; font-size:.9rem; font-weight:650; }
.play-area { display:grid; grid-template-columns:minmax(18rem,32rem) minmax(13rem,1fr); gap:1.25rem; align-items:start; }
.board { display:grid; grid-template-columns:repeat(8,1fr); gap:.24rem; padding:.38rem; border:2px solid var(--ink); background:var(--ink); box-shadow:.38rem .38rem 0 var(--accent); touch-action:none; }
.tile { aspect-ratio:1; min-width:0; border:0; border-radius:.3rem; color:var(--ink); cursor:pointer; font-size:clamp(1rem,3.5vw,2rem); font-weight:900; transition:transform 120ms ease,filter 120ms ease; }
.tile:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.07); }
.tile[aria-pressed="true"] { outline:3px solid white; outline-offset:-5px; transform:scale(.88); }
.tile-claw{background:#eeb64b}.tile-egg{background:#f7f2e9}.tile-tooth{background:#df7866}.tile-feather{background:#79aca9}.tile-footprint{background:#a88bc0}.tile-fossil{background:#91a86e}
.board.resolving { animation:rumble 180ms ease-in-out; }
.board.game-complete { filter:saturate(.7); }
.status-card { padding:1rem; border-top:.32rem solid var(--accent); background:rgba(255,255,255,.67); }
.meters { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-bottom:1rem; }
.meters p { margin:0; padding:.55rem; border:1px solid var(--line); background:white; }
.meters span,.meters strong { display:block; }.meters span { font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.meters strong { margin-top:.12rem; font-size:1.25rem; }
.status { min-height:4rem; margin:.45rem 0 0; font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; line-height:1.18; }
@keyframes rumble { 50% { transform:translateY(3px) rotate(.15deg); } }
@media(max-width:42rem){.controls,.play-area{grid-template-columns:1fr}#new-game{width:100%}.status-card{min-height:8rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}