:root{font-size:100%;--font-display: "Baskerville", "Palatino Linotype", "Book Antiqua", serif;--font-body: "Gill Sans", "Trebuchet MS", sans-serif;--color-ink: #2d2720;--color-forest: #36513a;--color-olive: #6e7a4a;--color-clay: #c2703f;--color-sand: #f2e3c1;--color-mist: #f7f4ee;--color-edge: rgba(45, 39, 32, .2);--color-player-red: #b54a3b;--color-player-blue: #4f6fa8;--color-player-green: #4f7a4b;--color-player-yellow: #c6a74a;--color-player-black: #2f2c28;--shadow-soft: 0 .6rem 1.6rem rgba(34, 30, 24, .15);--shadow-strong: 0 1rem 2.4rem rgba(34, 30, 24, .2);color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-body);color:var(--color-ink);background:radial-gradient(circle at 12% 18%,#ffffffb3,#fff0 55%),radial-gradient(circle at 82% 10%,#fff9,#fff0 50%),linear-gradient(135deg,#dce7c7 0%,var(--color-sand) 55%,#f4f1e7 100%);background-attachment:fixed}a{color:inherit}.page{max-width:72rem;margin:0 auto;padding:4rem 2.5rem 6rem;display:grid;gap:2.5rem;animation:page-rise .9s ease both}.lobby-header{display:flex;align-items:center;padding:1.1rem 1.5rem;border-radius:1.2rem;background:#f7f4eedb;border:.08rem solid var(--color-edge);box-shadow:var(--shadow-soft)}.lobby-header__title{margin:0;font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.15}.hero{display:flex;gap:2.5rem;align-items:flex-end;justify-content:space-between}.hero__copy{max-width:36rem}.hero__kicker{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2rem;font-size:.75rem;margin:0 0 .8rem;color:var(--color-forest)}.hero__title{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.6rem);margin:0 0 1rem}.hero__subtitle{margin:0;font-size:1.1rem;line-height:1.6;color:#4a433a}.card{background:var(--color-mist);border-radius:1.6rem;padding:2.5rem;box-shadow:var(--shadow-strong);border:.08rem solid var(--color-edge);-webkit-backdrop-filter:blur(.4rem);backdrop-filter:blur(.4rem);animation:card-rise .8s ease both}.card__title{margin:0 0 1.5rem;font-size:1.35rem;font-family:var(--font-display)}.lobby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2.5rem}.lobby-controls{display:grid;gap:1.6rem}.button-row{display:flex;flex-wrap:wrap;gap:1rem}.players-header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.players-count{font-size:.9rem;color:var(--color-olive)}.players-list,.sessions-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem}.players-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-radius:1rem;background:#fffc;border:.08rem solid var(--color-edge);box-shadow:var(--shadow-soft);opacity:0;animation:list-rise .6s ease forwards;animation-delay:var(--stagger, 0s)}.session-item{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.1rem 1.2rem;border-radius:1rem;background:#fffc;border:.08rem solid var(--color-edge);box-shadow:var(--shadow-soft);opacity:0;animation:list-rise .6s ease forwards;animation-delay:var(--stagger, 0s)}.players-name{font-weight:600}.session-info{display:grid;gap:.35rem}.session-id{font-weight:600;font-family:var(--font-display)}.session-meta{font-size:.85rem;color:var(--color-olive)}.players-id{font-family:var(--font-display);font-size:.85rem;color:var(--color-olive)}.session-actions{display:flex;align-items:center;gap:.8rem}.sessions-empty,.players-empty{padding:1rem 0;color:#6b6257}.hint{margin:0;font-size:.85rem;color:#6b6257}.lobby-players{margin-top:2.5rem}.game-page{gap:3rem}.game-hero{align-items:center}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,20rem);gap:2rem;align-items:start}.game-board{overflow:visible}.board-header{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem}.board-stats{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--color-olive)}.board-stat{font-family:var(--font-display)}.board-shell{position:relative;min-height:24rem;border-radius:1.2rem;background:radial-gradient(circle at top left,#ffffffb3,#fff0 55%),linear-gradient(135deg,#dce7c7e6,#f2e3c1e6);border:.1rem solid rgba(54,81,58,.25);overflow:auto;--tile-size: 6rem;--tile-gap: .4rem;--board-columns: 1;--board-rows: 1;--sheet-width: 6rem;--sheet-height: 6rem}.board-viewport{position:relative;min-height:24rem;display:grid;place-items:center;padding:2.5rem 2rem}.board-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to right,rgba(54,81,58,.12) .08rem,transparent .08rem),linear-gradient(to bottom,rgba(54,81,58,.12) .08rem,transparent .08rem);background-size:calc(var(--tile-size) + var(--tile-gap)) calc(var(--tile-size) + var(--tile-gap));opacity:0;pointer-events:none}.board-tiles{display:grid;grid-template-columns:repeat(var(--board-columns),var(--tile-size));grid-template-rows:repeat(var(--board-rows),var(--tile-size));gap:var(--tile-gap);position:relative;z-index:1;padding:0}.board-tile{width:var(--tile-size);height:var(--tile-size);border-radius:0;background-image:var(--tile-sheet);background-size:var(--sheet-width) var(--sheet-height);background-position:var(--tile-offset-x) var(--tile-offset-y);background-repeat:no-repeat;border:none;box-shadow:none;display:grid;place-items:center;transition:transform .2s ease,opacity .2s ease}button.board-tile{padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.board-tile--highlight{box-shadow:inset 0 0 0 .12rem #c2703fcc}.board-tile--ghost{opacity:.7;box-shadow:inset 0 0 0 .12rem #c2703fd9}.board-tile--ghost:hover{opacity:.9;box-shadow:inset 0 0 0 .12rem #c2703f}.board-tile--ghost:focus-visible{outline:.14rem solid rgba(194,112,63,.5);outline-offset:.12rem}.board-tile--missing{background:#fffc;box-shadow:inset 0 0 0 .08rem #2d272059}.board-meeple{position:relative;pointer-events:none;z-index:2}.board-meeple:after{content:"";position:absolute;left:var(--meeple-x);top:var(--meeple-y);width:.9rem;height:.9rem;border-radius:999rem;transform:translate(-50%,-50%);border:.1rem solid rgba(255,255,255,.85);box-shadow:0 .2rem .35rem #00000047;background:#2f2c28}.board-meeple__role{position:absolute;left:var(--meeple-x);top:var(--meeple-y);transform:translate(-50%,.8rem);font-size:.58rem;line-height:1;text-transform:capitalize;white-space:nowrap;color:#f8f2df;background:#1c1814d9;border-radius:.32rem;padding:.16rem .3rem;box-shadow:0 .16rem .3rem #0003;pointer-events:none}.board-meeple-target{border:none;padding:0;background:transparent;font:inherit;pointer-events:auto;cursor:pointer;z-index:3}.board-meeple-target:after{width:1.05rem;height:1.05rem;border:.1rem dashed rgba(194,112,63,.95);background:#f6e6bfad;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.board-meeple-target .board-meeple__role{color:#fff7ea;background:#c2703feb}.board-meeple-target:hover:after{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 .3rem .45rem #38221359;background:#faf0d5db}.board-meeple-target:focus-visible{outline:.14rem solid rgba(194,112,63,.55);outline-offset:.1rem;border-radius:.4rem}.board-meeple-target:disabled{cursor:default}.board-meeple--red:after{background:var(--color-player-red)}.board-meeple--blue:after{background:var(--color-player-blue)}.board-meeple--green:after{background:var(--color-player-green)}.board-meeple--yellow:after{background:var(--color-player-yellow)}.board-meeple--black:after{background:var(--color-player-black)}.board-tile__label{font-family:var(--font-display);font-size:.7rem;color:#4a433a;text-align:center;padding:0 .4rem}.game-hud{display:grid;gap:1.6rem;align-content:start}.hud-section{display:grid;gap:.5rem}.hud-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}.hud-list--tight{gap:.3rem}.hud-item{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;padding:.55rem .65rem;border-radius:.6rem;background:#ffffffbf;border:.08rem solid rgba(45,39,32,.12)}.hud-item--active{border-color:#c2703f99;background:#f2e3c1b3}.hud-item__name{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-size:.9rem}.hud-item__meta{font-size:.78rem;color:#5a5348}.hud-events{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}.hud-event{font-size:.8rem;color:#3e382f;padding:.5rem .65rem;border-radius:.6rem;border:.08rem solid rgba(45,39,32,.14)}.hud-event__text{display:block}.hud-event--red{background:#b54a3b29}.hud-event--blue{background:#4f6fa829}.hud-event--green{background:#4f7a4b29}.hud-event--yellow{background:#c6a74a33}.hud-event--black{background:#2f2c2829;color:#2f2c28}.hud-event--neutral{background:#ffffffb8}.hud-label{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.14rem;color:var(--color-olive)}.hud-value{margin:0;display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.05rem;color:#3b352d}.hud-chip{width:.75rem;height:.75rem;border-radius:999rem;box-shadow:inset 0 0 0 .12rem #fff9}.hud-chip--red{background:var(--color-player-red)}.hud-chip--blue{background:var(--color-player-blue)}.hud-chip--green{background:var(--color-player-green)}.hud-chip--yellow{background:var(--color-player-yellow)}.hud-chip--black{background:var(--color-player-black)}.hud-chip--neutral{background:#4f4c4866}.hud-tile-slot{display:grid;justify-items:center;gap:.6rem;padding:1.2rem;border-radius:1rem;border:.1rem dashed rgba(54,81,58,.35);background:#ffffffb3;text-align:center}.tile-sprite{width:var(--tile-size);height:var(--tile-size);border-radius:.6rem;background-image:var(--tile-sheet);background-size:var(--sheet-width) var(--sheet-height);background-position:var(--tile-offset-x) var(--tile-offset-y);background-repeat:no-repeat;border:.08rem solid rgba(45,39,32,.25);box-shadow:var(--shadow-soft)}.tile-sprite--missing{display:grid;place-items:center;font-size:.75rem;text-align:center;padding:.4rem;background:#fffc;border-style:dashed}.hud-tile-placeholder{margin:0;font-size:.85rem;color:#6b6257}.hud-tile-id{margin:0;font-size:.75rem;font-family:var(--font-display);color:var(--color-olive)}.field{display:grid;gap:.6rem}.field__label{font-size:.85rem;text-transform:uppercase;letter-spacing:.12rem;color:var(--color-olive)}.field__input{border:.08rem solid var(--color-edge);border-radius:.9rem;padding:.85rem 1rem;font-size:1rem;font-family:inherit;background:#ffffffbf;color:inherit}.field__input:focus{outline:.14rem solid rgba(194,112,63,.4);outline-offset:.1rem}.button{border:none;border-radius:999rem;padding:.8rem 1.6rem;font-size:.95rem;font-family:var(--font-body);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.button--primary{background:linear-gradient(130deg,#d98553,#b95a2a);color:#fff;box-shadow:var(--shadow-soft)}.button--ghost{background:transparent;border:.1rem solid var(--color-olive);color:var(--color-olive)}.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button:not(:disabled):hover{transform:translateY(-.1rem)}.badge{padding:.5rem 1.1rem;border-radius:999rem;font-size:.85rem;font-weight:600;letter-spacing:.1rem;text-transform:uppercase}.badge--positive{background:#386e4e26;color:var(--color-forest)}.badge--neutral{background:#4f4c481a;color:#4f4c48}.badge--warning{background:#c2703f2e;color:#9c4c27}.error{color:#a63b2a;margin:0}.placement-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,16rem);gap:1.2rem 2rem;padding:1.4rem 1.6rem;margin-bottom:1.6rem;border-radius:1.2rem;border:.08rem solid var(--color-edge);background:#ffffffbf;box-shadow:var(--shadow-soft)}.placement-status{display:grid;gap:.6rem}.placement-actions{display:grid;gap:.8rem;align-content:start}.meeple-panel{display:grid;gap:.5rem}.rotation-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.rotation-value{font-family:var(--font-display);font-size:.95rem;color:var(--color-olive);min-width:3rem;text-align:center}.placement-tile-slot{grid-row:1 / span 2;display:grid;justify-items:center;gap:.4rem}@keyframes page-rise{0%{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:translateY(0)}}@keyframes card-rise{0%{opacity:0;transform:translateY(1rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes list-rise{0%{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:translateY(0)}}@media (max-width: 52rem){.page{padding:3rem 1.5rem 4rem}.hero{flex-direction:column;align-items:flex-start}.game-layout,.placement-panel{grid-template-columns:1fr}.placement-tile-slot{grid-row:auto}}@media (max-width: 36rem){.card{padding:2rem 1.5rem}.button-row{flex-direction:column;align-items:stretch}}
