:root {
  --ink: #fff4d6;
  --shadow: #27171a;
  --panel: rgba(15, 22, 34, 0.9);
  --cream: #ffe8b5;
  --line: #f0d18d;
  --brown: #6f4329;
  --brown-dark: #332018;
  --gold: #ffd747;
  --gold-dark: #c0611f;
  --blue: #59b9ff;
  --blue-dark: #1764a6;
  --green: #8fd955;
  --green-dark: #3f7a2d;
  color-scheme: dark;
  font-family: "Trebuchet MS", "Lucida Grande", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: #071522;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.image-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #071522;
  isolation: isolate;
}

.screen-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.landing-actions {
  position: absolute;
  left: 50%;
  top: 49%;
  display: grid;
  width: min(420px, 27vw);
  min-width: 330px;
  gap: clamp(10px, 1.4vh, 16px);
  transform: translateX(-50%);
}

.pixel-button,
.pixel-icon-button,
.pixel-square-button,
.guest-link {
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.pixel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(52px, 7.1vh, 78px);
  padding: 0 22px;
  border: 4px solid #fff0ad;
  color: #17131b;
  box-shadow: 0 7px 0 #533320, 0 0 0 2px #2d1b18;
  text-align: center;
}

.pixel-button:focus-visible,
.pixel-icon-button:focus-visible,
.pixel-square-button:focus-visible,
.guest-link:focus-visible,
.pixel-field input:focus-visible {
  outline: 4px solid #fff7a8;
  outline-offset: 3px;
}

.pixel-button-gold {
  background: linear-gradient(#ffef7b, #ffc13a 48%, #f39a24);
}

.pixel-button-blue {
  background: linear-gradient(#87d6ff, #47a9f2 48%, #2279cf);
}

.pixel-button-green {
  background: linear-gradient(#b9ef72, #79c843 48%, #4b932e);
}

.pixel-button-brown {
  border-color: #d7b37a;
  background: linear-gradient(#9e6c43, #6b4229 50%, #4a2c21);
  color: #fff0ca;
}

.pixel-button-disabled,
.pixel-button:disabled {
  border-color: #b1bbc7;
  background: linear-gradient(#77818d, #4a5361);
  color: #d6dce5;
  cursor: not-allowed;
  opacity: 0.86;
}

.play-icon {
  width: 0;
  height: 0;
  margin-right: 16px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid #1d2434;
}

.user-icon {
  position: relative;
  width: 30px;
  height: 30px;
  margin-right: 14px;
}

.user-icon::before,
.user-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  background: #1d2434;
  transform: translateX(-50%);
}

.user-icon::before {
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.user-icon::after {
  bottom: 3px;
  width: 25px;
  height: 13px;
  border-radius: 12px 12px 5px 5px;
}

.guest-link {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: rgba(14, 22, 35, 0.72);
  color: #fff7d8;
  text-shadow: 0 2px 0 #241719;
}

.landing-settings {
  position: absolute;
  right: clamp(18px, 2.4vw, 42px);
  top: clamp(16px, 2.4vw, 32px);
}

.pixel-icon-button {
  display: grid;
  width: clamp(62px, 5vw, 88px);
  min-height: clamp(62px, 5.4vw, 94px);
  place-items: center;
  padding: 8px 7px;
  border: 4px solid var(--line);
  background: linear-gradient(#26374f, #101827);
  box-shadow: 0 5px 0 #050914, 0 0 0 2px #0a1020;
  color: #fff4d6;
  font-size: clamp(0.66rem, 0.8vw, 0.9rem);
}

.gear-icon::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  border: 8px solid #d7dce6;
  border-radius: 50%;
  background:
    linear-gradient(#d7dce6, #d7dce6) center / 100% 8px no-repeat,
    linear-gradient(90deg, #d7dce6, #d7dce6) center / 8px 100% no-repeat;
  box-shadow: 0 0 0 4px #5d6471;
}

.login-nav {
  position: absolute;
  left: clamp(18px, 1.8vw, 32px);
  top: clamp(18px, 2.4vh, 30px);
  display: flex;
  gap: clamp(8px, 0.8vw, 14px);
}

.pixel-square-button {
  position: relative;
  display: grid;
  width: clamp(54px, 4.5vw, 76px);
  height: clamp(54px, 4.5vw, 76px);
  place-items: center;
  border: 4px solid #d6a96b;
  background: linear-gradient(#8e5f33, #4a2d21);
  box-shadow: 0 5px 0 #1e1210, 0 0 0 2px #2b1b16;
  color: #fff1c6;
}

.back-icon::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 23px solid #fff1c6;
}

.pixel-square-button.gear-icon::before {
  width: 28px;
  height: 28px;
  margin: 0;
}

.help-icon::before {
  content: "?";
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.login-controls {
  position: absolute;
  right: clamp(70px, 5.5vw, 100px);
  top: 37%;
  display: grid;
  width: min(460px, 27vw);
  min-width: 365px;
  gap: clamp(10px, 1.2vh, 15px);
}

.auth-form {
  display: grid;
  gap: clamp(10px, 1.2vh, 15px);
}

.pixel-field {
  display: grid;
  min-height: clamp(52px, 6.2vh, 70px);
  border: 4px solid #6d4327;
  border-radius: 7px;
  background: linear-gradient(#fff0c9, #f3d79e);
  box-shadow: inset 0 3px 0 rgba(74, 47, 31, 0.22), 0 4px 0 #2f1c16;
}

.pixel-field span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.pixel-field input {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 18px;
  background: transparent;
  color: #2d211b;
  outline: 0;
  font-size: clamp(1rem, 1.4vw, 1.55rem);
  font-weight: 700;
}

.pixel-field input::placeholder {
  color: rgba(57, 45, 35, 0.58);
}

.legacy-card,
.notice {
  border: 3px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}

.legacy-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  color: #ffeec3;
  font-size: clamp(0.72rem, 0.8vw, 0.88rem);
}

.legacy-card strong {
  text-transform: uppercase;
}

.legacy-card span {
  line-height: 1.3;
}

.legacy-card .pixel-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.82rem;
}

.overlay-notice {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  width: min(560px, 90vw);
  margin: 0;
  padding: 11px 14px;
  transform: translateX(-50%);
  color: #fff2bc;
  font-weight: 800;
  text-align: center;
}

.version-label {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: rgba(255, 244, 215, 0.76);
  font-weight: 800;
}

.game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #101820;
}

/* Adventure showcase */
.page-game { --glass: rgba(16, 34, 50, .9); --gold-line: #f1d18a; }
.adventure-header { position:absolute; inset:16px 18px auto; z-index:20; display:flex; align-items:center; gap:12px; pointer-events:none; }
.brand-chip,.player-chip,.resource-strip,.quest-card,.social-card,.game-dock,.control-hint { border:3px solid var(--gold-line); background:linear-gradient(145deg,rgba(29,57,76,.96),rgba(12,28,44,.96)); box-shadow:0 6px 0 rgba(8,15,27,.65),0 0 0 2px rgba(22,34,44,.8); }
.brand-chip { display:flex; align-items:center; gap:9px; height:50px; padding:0 16px 0 7px; border-radius:13px; font-size:1.08rem; font-weight:1000; pointer-events:auto; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:linear-gradient(#ffdd63,#e78b35); color:#263449; box-shadow:inset 0 -4px rgba(136,72,36,.25); }
.player-chip { display:flex; align-items:center; gap:9px; min-width:190px; height:50px; padding:4px 13px 4px 6px; border-radius:13px; }
.mini-avatar { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#82c1d5; color:#243244; font-size:20px; }
.player-chip>span:last-child { display:grid; line-height:1.05; }.player-chip small { margin-top:4px; color:#b9cfcc; font-size:.69rem; font-weight:800; text-transform:uppercase; }
.resource-strip { margin-left:auto; display:flex; height:46px; align-items:center; gap:4px; padding:4px; border-radius:13px; }
.resource-strip span { min-width:64px; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.08); text-align:center; }
.resource-strip span:last-child strong { color:#7defa2; }
.quest-card { position:absolute; left:18px; top:82px; z-index:20; display:grid; width:280px; padding:13px 15px 14px; border-radius:13px; line-height:1.2; pointer-events:none; }
.social-card { position:absolute; right:18px; top:82px; z-index:20; display:grid; width:245px; gap:8px; padding:13px 15px 14px; border-radius:13px; line-height:1.2; pointer-events:none; }
.quest-kicker,.game-dialog small,.menu-panel>small,.activity-panel>small,.battle-panel>small,.expedition-panel>small,.victory-panel>small,.pet-discovery>small,.hatch-panel>small,.dialog-hero small { color:#f3d579; font-size:.68rem; font-weight:1000; letter-spacing:.13em; text-transform:uppercase; }
.quest-card strong { margin:4px 0; font-size:1rem; }.quest-card>span:not(.quest-kicker){color:#c8dadb;font-size:.78rem;font-weight:700;}
.social-card strong { color:#fff2c5; font-size:.98rem; }.social-feed { display:grid; gap:6px; }.social-feed span { display:flex; align-items:center; gap:7px; min-height:30px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.07); color:#c8dadb; font-size:.72rem; font-weight:800; }
.quest-progress { height:7px; margin-top:10px; overflow:hidden; border-radius:8px; background:#0b1e2b; }.quest-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#73c968,#f0d65f); transition:width .4s ease; }
.game-dock { position:absolute; left:50%; bottom:20px; z-index:20; display:flex; gap:5px; padding:7px; transform:translateX(-50%); border-radius:17px; }
.game-dock button { display:grid; width:68px; min-height:60px; place-items:center; border:0; border-radius:10px; background:rgba(255,255,255,.06); color:#f8edce; cursor:pointer; }.game-dock button:hover{background:rgba(255,223,132,.18);transform:translateY(-2px)}
.game-dock button span{font-size:24px}.game-dock button small{font-size:.66rem;font-weight:900;text-transform:uppercase}
.interaction-prompt { position:absolute; left:50%; bottom:104px; z-index:25; display:flex; align-items:center; gap:9px; padding:8px 14px; transform:translateX(-50%); border:2px solid #fff0b5; border-radius:10px; background:rgba(13,29,42,.94); box-shadow:0 4px 0 rgba(0,0,0,.35); color:#fff5d4; font-weight:900; }
.interaction-prompt[hidden],.game-toast[hidden]{display:none}.interaction-prompt kbd,.control-hint kbd{padding:4px 7px;border:2px solid #e9ca82;border-radius:6px;background:#f5e4b5;color:#26394b;box-shadow:0 2px #805d36;font-weight:1000}
.touch-controls { position:absolute; left:18px; bottom:18px; z-index:22; display:none; align-items:flex-end; gap:12px; }
.touch-stick { position:relative; width:108px; height:108px; border:3px solid #e9ca82; border-radius:50%; background:rgba(14,35,51,.82); box-shadow:0 5px 0 rgba(0,0,0,.38),inset 0 0 0 12px rgba(255,255,255,.035); touch-action:none; user-select:none; }
.touch-stick::before,.touch-stick::after { content:""; position:absolute; inset:50% auto auto 50%; background:rgba(255,236,180,.22); transform:translate(-50%,-50%); pointer-events:none; }
.touch-stick::before { width:2px; height:72px; }.touch-stick::after { width:72px; height:2px; }
.touch-stick i { position:absolute; left:50%; top:50%; z-index:2; width:48px; height:48px; border:3px solid #fff0ae; border-radius:50%; background:linear-gradient(#3b6178,#17364b); box-shadow:0 4px 0 #071725; transform:translate(-50%,-50%); transition:transform 70ms linear; pointer-events:none; }
.touch-action { display:grid; width:66px; height:66px; place-items:center; align-content:center; gap:0; border:3px solid #fff0ae; border-radius:50%; background:linear-gradient(#ffd969,#d88738); box-shadow:0 5px 0 #7e472d;color:#26384a;font-weight:1000;text-transform:uppercase;touch-action:manipulation; }
.touch-action span { font-size:20px; line-height:1; }.touch-action small { font-size:.58rem; }
.touch-action:active { transform:translateY(3px); box-shadow:0 2px 0 #7e472d; }
.game-toast { position:absolute; left:50%; top:92px; z-index:60; padding:12px 18px; transform:translateX(-50%); border:3px solid #f1d18a; border-radius:12px; background:#172f42; box-shadow:0 6px 18px rgba(0,0,0,.35); color:#fff1c4; font-weight:900; animation:toast-in .25s ease-out; }
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.control-hint { position:absolute; right:18px; bottom:20px; z-index:19; padding:10px 12px; border-radius:11px; color:#c5d8d9; font-size:.72rem;font-weight:800}.page-game .version-label{z-index:21;bottom:4px;font-size:.6rem}

.game-dialog { width:min(760px,calc(100vw - 32px)); max-height:90vh; overflow:auto; padding:0; border:4px solid #f0d38e; border-radius:22px; background:linear-gradient(155deg,#23465c,#10293e 70%); box-shadow:0 12px 0 #081726,0 26px 80px rgba(0,0,0,.58); color:#fff1ce; }
.game-dialog::backdrop { background:rgba(4,13,23,.7); backdrop-filter:blur(5px); }.dialog-close { position:absolute; right:13px; top:11px; z-index:3; width:38px;height:38px;border:2px solid #ddc58d;border-radius:10px;background:#1b3449;color:#ffe6aa;font-size:25px;font-weight:900;cursor:pointer}
.game-dialog h1{margin:5px 0 9px;font-size:clamp(1.6rem,4vw,2.5rem);line-height:1}.game-dialog p{color:#c8dcda;line-height:1.5}.dialog-hero{display:flex;gap:18px;padding:28px 30px 12px;align-items:center}.dialog-hero>span{font-size:58px}.creator-form{display:grid;gap:18px;padding:12px 30px 30px}.creator-form label{display:grid;gap:7px;color:#f4dfa8;font-weight:900}.creator-form input,.pet-name-field input{height:52px;border:3px solid #bf9866;border-radius:10px;background:#fff0c9;color:#2e3740;padding:0 14px;font-size:1.08rem;font-weight:800;outline:0}.creator-form fieldset{border:0;padding:0;margin:0}.creator-form legend{margin-bottom:9px;color:#f4dfa8;font-weight:900}.choice-grid{display:flex;gap:10px}.avatar-choice,.palette-choice{width:64px;height:58px;border:3px solid #668097;border-radius:12px;background:#142c41;font-size:28px;cursor:pointer}.avatar-choice.selected,.palette-choice.selected{border-color:#ffe178;box-shadow:0 0 0 3px rgba(255,225,120,.22);transform:translateY(-2px)}.palette-choice{position:relative}.palette-choice::after{content:"";position:absolute;inset:9px;border-radius:8px;background:var(--swatch)}
.adventure-button{display:flex;width:100%;min-height:54px;align-items:center;justify-content:center;gap:9px;border:3px solid #fff0a7;border-radius:11px;background:linear-gradient(#ffe66e,#edaa3b);box-shadow:0 5px 0 #8d4e2d;color:#273342;font-weight:1000;text-transform:uppercase;cursor:pointer}.adventure-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.adventure-button:disabled,.adventure-button.claimed{filter:saturate(.45);cursor:default}
.pet-discovery,.activity-panel,.battle-panel,.expedition-panel,.victory-panel,.hatch-panel,.menu-panel{padding:34px;text-align:center}.discovery-glow{display:grid;width:150px;height:150px;margin:0 auto 14px;place-items:center;border-radius:50%;background:radial-gradient(#d9f78e,#77bb72 42%,rgba(82,161,117,.05) 70%);animation:pulse 1.8s infinite}.big-pet{font-size:76px}@keyframes pulse{50%{transform:scale(1.05)}}.trait-row,.reward-preview{display:flex;justify-content:center;gap:9px;margin:16px 0;flex-wrap:wrap}.trait-row span,.reward-preview span{padding:8px 12px;border:2px solid #8ba58c;border-radius:20px;background:#173a3d;font-weight:800}.pet-name-field{display:grid;max-width:340px;margin:18px auto;gap:6px;text-align:left;color:#f4dfa8;font-weight:900}
.chime-field{position:relative;height:260px;margin:20px 0;border:4px solid #78a866;border-radius:18px;background:linear-gradient(#75c9da 0 43%,#79b961 43%);overflow:hidden}.chime-field::after{content:"";position:absolute;inset:auto 0 0;height:35%;background:radial-gradient(circle at 20% 60%,#f7db61 0 4px,transparent 5px),radial-gradient(circle at 70% 40%,#e994bb 0 5px,transparent 6px);background-size:70px 70px}.chime-field button{position:absolute;left:var(--x);top:var(--y);z-index:2;width:58px;height:58px;border:3px solid #fff3a4;border-radius:50%;background:#f4cf4f;color:#63413a;font-size:28px;font-weight:1000;box-shadow:0 0 24px #fff6a8;cursor:pointer;animation:note-float 1.2s infinite alternate}.chime-field button.caught{opacity:0;transform:scale(1.7)}@keyframes note-float{to{translate:0 -8px}}
.battle-stage{display:flex;align-items:center;justify-content:center;gap:28px;margin:20px 0}.battler{display:grid;width:200px;gap:6px}.battler>span{font-size:70px}.battler i{height:12px;overflow:hidden;border:2px solid #0c1e2c;border-radius:10px;background:#1a2630}.battler i b{display:block;height:100%;background:linear-gradient(90deg,#64bd66,#a7e17e);transition:width .25s}.battler small{color:#cfe0dd;letter-spacing:0}.battle-versus{color:#f4ce68;font-size:1.4rem;font-weight:1000;transform:rotate(-7deg)}.energy{margin:8px;color:#f4cf5f;font-weight:1000}.card-hand,.deck-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.battle-card,.deck-grid article{position:relative;display:grid;min-height:150px;place-items:center;padding:12px 8px;border:3px solid #e1c487;border-radius:12px;background:linear-gradient(#345b71,#1c3a50);color:#fff0c5;cursor:pointer}.battle-card:hover{transform:translateY(-8px);box-shadow:0 10px 20px rgba(0,0,0,.35)}.battle-card>span,.deck-grid article>span{font-size:35px}.battle-card small{color:#bfd1d1;font-size:.67rem}.battle-card b{position:absolute;right:6px;top:6px;display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#f1c851;color:#273442}.battle-card:disabled{opacity:.5}
.expedition-icon,.victory-panel>span,.hatch-reveal>span{display:block;font-size:82px;margin-bottom:10px}.expedition-icon.walking{animation:walking 1s infinite alternate}@keyframes walking{to{transform:translateX(35px)}}.idle-timer{display:grid;width:130px;height:130px;margin:24px auto;place-items:center;border:8px solid #efcf68;border-radius:50%;background:#17384b;font-size:2.2rem;font-weight:1000;box-shadow:0 0 35px rgba(239,207,104,.2)}
.egg-orbit{position:relative;display:grid;width:180px;height:180px;margin:0 auto 18px;place-items:center;border-radius:50%;background:radial-gradient(#efffc1,#6bc0b4 35%,transparent 68%)}.egg-orbit span{font-size:88px;animation:egg-wiggle .7s infinite alternate}.egg-orbit i{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff1a0;box-shadow:0 0 15px #fff}@keyframes egg-wiggle{to{transform:rotate(7deg) scale(1.03)}}.hatch-reveal{background:radial-gradient(circle at 50% 42%,rgba(255,245,156,.22),transparent 45%)}
.pet-roster,.inventory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}.pet-roster article,.inventory-grid article{display:flex;align-items:center;gap:13px;min-height:86px;padding:13px;border:3px solid #66879a;border-radius:13px;background:#17364a;text-align:left}.pet-roster article>span,.inventory-grid article>span{font-size:40px}.pet-roster article div{display:grid}.pet-roster article small{color:#b8cfce;letter-spacing:0}.pet-roster article.locked{opacity:.45}.inventory-grid article{display:grid;place-items:center;text-align:center}.inventory-grid article strong{font-size:.78rem}.deck-grid{margin-top:20px}.deck-grid article{min-height:120px;cursor:default}.deck-grid article small{color:#aac7c8}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.profile-stats span{display:grid;padding:15px;border:2px solid #66879a;border-radius:11px;background:#17364a}.profile-stats b{color:#f3d46f;font-size:1.5rem}.demo-disclosure{font-size:.72rem}.equip-list{display:grid;gap:9px;margin:18px 0}.equip-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 13px;border:2px solid #e0c17d;border-radius:10px;background:#17364a;color:#fff0c5;font-weight:900;cursor:pointer}.equip-list button.equipped{background:#2f654c;color:#f7ffd7}.mini-map{position:relative;height:330px;margin-top:18px;border:4px solid #b9915f;border-radius:18px;background:radial-gradient(circle at 70% 30%,#e4cf83 0 8%,transparent 9%),linear-gradient(145deg,#68a760,#4b8758);overflow:hidden}.mini-map::before{content:"";position:absolute;left:22%;top:-10%;width:22%;height:120%;background:#d8c080;transform:rotate(28deg)}.mini-map span{position:absolute;z-index:2;padding:8px 10px;border:2px solid #f4df9a;border-radius:9px;background:#18374a;font-weight:900}.map-house{left:10%;top:15%}.map-town{left:42%;top:43%}.map-wild{right:8%;bottom:14%}

@media(max-width:780px){.brand-chip span:last-child,.player-chip{display:none}.resource-strip span{min-width:auto}.quest-card{top:76px;width:230px}.social-card{display:none}.control-hint{display:none}.card-hand,.deck-grid{grid-template-columns:repeat(2,1fr)}.battle-stage{gap:8px}.battler{width:130px}.pet-roster,.inventory-grid{grid-template-columns:1fr}.game-dialog{max-height:calc(100dvh - 16px)}.dialog-hero,.creator-form,.menu-panel,.activity-panel,.battle-panel,.expedition-panel,.victory-panel,.hatch-panel,.pet-discovery{padding-left:20px;padding-right:20px}.choice-grid{flex-wrap:wrap}}

@media (pointer: coarse) {
  .touch-controls { display:flex; left:max(12px,env(safe-area-inset-left)); bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px)); }
  .game-dock { right:12px; bottom:max(8px,env(safe-area-inset-bottom)); left:12px; width:auto; max-width:none; transform:none; gap:2px; padding:5px; border-radius:13px; }
  .game-dock button { width:auto; min-width:0; min-height:50px; flex:1; padding:3px 1px; touch-action:manipulation; }
  .game-dock button span { font-size:20px; }
  .game-dock button small { font-size:.58rem; }
  .interaction-prompt { right:12px; bottom:max(188px,calc(env(safe-area-inset-bottom) + 180px)); left:auto; max-width:calc(100vw - 176px); transform:none; }
  .interaction-prompt kbd { display:none; }
  .control-hint { display:none; }
  .page-game .version-label { display:none; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .touch-controls { bottom:max(12px,env(safe-area-inset-bottom)); }
  .game-dock { right:auto; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; width:min(380px,46vw); transform:translateX(-50%); }
  .interaction-prompt { right:18px; bottom:86px; max-width:220px; }
  .quest-card { top:76px; width:250px; padding:10px 13px; }
}

@media (max-width: 360px) {
  .adventure-header { inset:10px 10px auto; }
  .brand-chip { width:48px; height:46px; padding:0 5px; }
  .brand-mark { width:32px; height:32px; }
  .resource-strip { height:44px; }
  .resource-strip span { padding:6px 7px; }
  .quest-card { top:66px; left:10px; width:220px; padding:10px 12px; }
  .touch-controls { left:10px; gap:8px; }
  .touch-stick { width:100px; height:100px; }
  .touch-action { width:62px; height:62px; }
  .game-dock { right:8px; left:8px; }
  .game-dialog { width:calc(100vw - 12px); border-width:3px; border-radius:16px; }
  .dialog-close { right:8px; top:8px; width:36px; height:36px; }
  .dialog-hero { gap:9px; padding-top:22px; }
  .dialog-hero>span { font-size:40px; }
  .game-dialog h1 { padding-right:28px; font-size:1.55rem; }
  .game-dialog p { margin:7px 0; line-height:1.35; }
  .creator-form { gap:12px; padding-top:8px; padding-bottom:22px; }
  .avatar-choice,.palette-choice { width:52px; height:50px; }
  .choice-grid { gap:7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.game-canvas {
  width: 100vw;
  height: 100vh;
}

.game-canvas canvas {
  display: block;
  image-rendering: pixelated;
}

.game-nav {
  position: absolute;
  left: clamp(14px, 1.6vw, 28px);
  top: clamp(14px, 1.8vw, 28px);
  z-index: 2;
}

.game-hud {
  position: absolute;
  left: 50%;
  top: clamp(14px, 1.8vw, 28px);
  z-index: 2;
  display: grid;
  width: min(520px, 58vw);
  min-height: 68px;
  padding: 10px 16px;
  transform: translateX(-50%);
  border: 3px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 22, 34, 0.86);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
  color: #fff1c6;
  line-height: 1.25;
}

.game-hud strong {
  text-transform: uppercase;
}

.game-hud span {
  font-weight: 800;
}

@media (max-width: 1000px) {
  .landing-actions {
    top: 50%;
    width: min(390px, 58vw);
  }

  .login-controls {
    right: 4vw;
    width: min(430px, 43vw);
    min-width: 320px;
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .image-screen {
    min-height: 100vh;
  }

  .screen-art {
    object-position: center;
  }

  .landing-actions {
    top: 46%;
    width: min(360px, 82vw);
    min-width: 0;
  }

  .login-controls {
    left: 50%;
    right: auto;
    top: 31%;
    width: min(390px, 88vw);
    min-width: 0;
    transform: translateX(-50%);
  }

  .pixel-button {
    min-height: 52px;
  }

  .game-hud {
    left: auto;
    right: 12px;
    width: min(360px, calc(100vw - 100px));
    transform: none;
  }
}