:root {
  --bg:#f6f5ef;
  --surface:#fffef9;
  --border:#d9dfd3;
  --text:#243f35;
  --muted:#647367;
  --forest:#285a46;
  --gold:#a66b28;
  --green:#557c52;
  --blue:#5b8292;
  color-scheme:light;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,select {
  font:inherit;
}
button,a,input,select {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
  opacity:.5;
}
a {
  color:inherit;
  text-decoration:none;
}
[hidden] {
  display:none!important;
}
.prototype-banner {
  background:#e8ecdf;
  border-bottom:1px solid var(--border);
  text-align:center;
  padding:8px 16px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
  color:#53634f;
}
.prototype-banner span {
  font-weight:400;
  letter-spacing:0;
}
.layout {
  display:flex;
  min-height:calc(100vh - 32px);
}
.sidebar {
  width:220px;
  flex-shrink:0;
  padding:35px 20px;
  background:#eef0e7;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}
.logo {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:2px;
  line-height:1.5;
  padding:0 10px;
}
.logo b {
  font-size:22px;
  letter-spacing:4px;
  font-weight:800;
}
.logo-mark {
  font-size:36px;
  color:var(--forest);
}
.sidebar nav {
  display:grid;
  gap:8px;
  margin-top:48px;
}
.nav {
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  background:none;
  border:none;
  color:#566759;
  border-radius:10px;
  padding:13px 12px;
  font-size:12px;
  min-height:44px;
}
.nav span {
  font-size:19px;
  min-width:20px;
}
.nav:hover {
  background:#e0e6d7;
}
.nav.active {
  background:var(--forest);
  color:#fffef5;
}
.health-link {
  margin-top:16px;
  border-top:1px solid var(--border);
  border-radius:0;
  padding-top:24px;
}
.sidebar-bottom {
  margin-top:auto;
  padding:48px 10px 0;
  font-size:11px;
  color:var(--muted);
}
.small-label,.eyebrow {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:700;
  color:var(--muted);
}
.local-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  margin-right:5px;
}
main {
  width:100%;
  max-width:1450px;
  padding:26px 40px 18px;
  min-width:0;
  margin:0 auto;
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding-bottom:20px;
  gap:16px;
}
.breadcrumb {
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
}
.breadcrumb b {
  font-weight:600;
  color:var(--text);
}
.perspective {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--muted);
}
.perspective select {
  width:105px;
  margin:0;
  border-radius:24px;
}
.message {
  font-size:12px;
  color:var(--forest);
  min-height:18px;
  margin:14px 0 18px;
}
.message.error {
  color:#a33727;
}
.heading-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:24px;
}
h1 {
  font-size:38px;
  font-weight:650;
  letter-spacing:-1.6px;
  margin:8px 0;
  line-height:1.15;
}
h1 span {
  color:var(--gold);
}
.heading-row p,.screen>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}
h2 {
  font-weight:600;
  font-size:27px;
  margin:12px 0;
  letter-spacing:-.7px;
}
h3 {
  font-weight:650;
  font-size:15px;
  margin:0;
}
.pill {
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border-radius:30px;
  border:1px solid var(--border);
  color:#53634f;
  background:#f0f2e8;
  font-size:10px;
  letter-spacing:.6px;
  white-space:nowrap;
}
.home-grid {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.creature-workshop {
  overflow:hidden;
  border:1px solid #cbd7bf;
  border-radius:20px;
  background:var(--surface);
}
.creature-stage {
  position:relative;
  overflow:hidden;
  min-height:365px;
  background:radial-gradient(ellipse at 50% 35%,#eff2d7 0%,#e2eaca 55%,#cdddbf 100%);
  padding:22px 24px 26px;
}
.stage-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:2;
}
.stage-top .pill {
  background:#f8faecb3;
  border-color:#b9c9aa;
  color:#415c3e;
}
.mood {
  font-size:11px;
  color:#415c3e;
}
.mood i {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  margin-right:4px;
}
.creature-art {
  width:270px;
  max-width:100%;
  margin:-5px auto -12px;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 10px 10px #3f5b3612);
}
.creature-art svg {
  display:block;
  width:100%;
  height:auto;
}
.scene-sun {
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  top:65px;
  left:calc(50% - 95px);
  background:#fffcec9c;
}
.creature-greeting {
  display:block;
  position:relative;
  z-index:2;
  width:100%;
  padding:0 0 12px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--forest);
  -webkit-tap-highlight-color:transparent
}
.creature-greeting .creature-art {
  display:block;
  max-width:100%
}
.greeting-invitation {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border:1px solid #9aaf8d;
  border-radius:24px;
  background:var(--surface);
  font-size:12px
}
.creature-greeting:hover .greeting-invitation,
.creature-greeting:focus-visible .greeting-invitation {
  background:#e3ebdb;
  border-color:var(--forest)
}
.creature-greeting:focus-visible {
  outline:none
}
.creature-greeting:focus-visible .greeting-invitation {
  outline:2px solid var(--forest);
  outline-offset:4px
}
.creature-stage .creature-caption {
  margin-top:4px
}
#greeting,#growth-feedback {
  overflow-wrap:anywhere
}
.creature-caption h2 {
  overflow-wrap:anywhere
}
.creature-caption #creature-subtitle {
  min-height:3em;
  line-height:1.5;
  max-width:34ch;
  margin:0 auto;
  overflow-wrap:anywhere;
  color:var(--text)
}
@media(prefers-reduced-motion:no-preference) {
  #home-creature.greeting-wave .leaves {
    animation:greeting-leaves .8s ease-in-out
  }
  #home-creature.greeting-wave .tail {
    animation:greeting-tail .8s ease-in-out
  }
}
@keyframes greeting-leaves {
  25%,65% { transform:rotate(-14deg) }
  45%,85% { transform:rotate(9deg) }
}
@keyframes greeting-tail {
  25%,65% { transform:rotate(18deg) }
  45%,85% { transform:rotate(-8deg) }
}
.stage-ground {
  position:absolute;
  left:-15%;
  bottom:-88px;
  height:215px;
  width:130%;
  border-radius:50%;
  background:#c6d8b4;
  border-top:1px solid #baccaa;
}
.creature-stage::after {
  content:"";
  position:absolute;
  width:180px;
  height:70px;
  background:#b1c69b;
  border-radius:50%;
  bottom:0;
  right:-75px;
  transform:rotate(-30deg);
}
.creature-caption {
  text-align:center;
  position:relative;
  z-index:2;
}
.creature-caption .eyebrow {
  font-size:9px;
  letter-spacing:2px;
  color:#476340;
}
.creature-caption h2 {
  font-family:Georgia,serif;
  font-size:34px;
  font-weight:400;
  letter-spacing:-.8px;
  margin:5px 0 0;
  overflow-wrap:anywhere;
}
.home-right {
  display:grid;
  gap:18px;
}
.countdown-card,.development-card,.keepsakes,.panel {
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:24px;
}
.countdown-card {
  background:#244c3d;
  color:#f6f5e9;
  border-color:#244c3d;
}
.countdown-card .eyebrow {
  color:#c5d6bd;
}
.countdown {
  font-size:38px;
  letter-spacing:-1.5px;
  font-weight:500;
  color:#f5e6ba;
  margin:12px 0 7px;
  font-variant-numeric:tabular-nums;
}
.countdown-card>p {
  font-size:12px;
  color:#ccdac9;
  margin:0;
}
.mini-rivals {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  font-size:13px;
  margin:22px 0;
}
.vs {
  font-size:10px;
  color:#c0ccaf;
}
.primary,.secondary {
  border:1px solid transparent;
  border-radius:9px;
  padding:12px 18px;
  font-size:12px;
  font-weight:650;
  min-height:44px;
  transition:background .15s,transform .15s;
}
.primary {
  background:var(--forest);
  color:#fffef5;
}
.primary:hover:not(:disabled) {
  background:#1c4433;
  transform:translateY(-1px);
}
.countdown-card .primary {
  background:#e8d5a0;
  color:#293e2c;
}
.countdown-card .primary:hover {
  background:#f3e2b5;
}
.primary.wide {
  display:flex;
  justify-content:center;
  gap:25px;
  align-items:center;
}
.wide {
  width:100%;
}
.secondary {
  background:#edf1e5;
  border-color:#c5d1bc;
  color:#31583e;
}
.secondary:hover:not(:disabled) {
  background:#dfe8d6;
}
.card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.quiet {
  font-size:9px;
  letter-spacing:.8px;
  color:var(--muted);
}
.development-card p {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.attribute-row {
  display:grid;
  grid-template-columns:22px 84px minmax(25px,1fr) 56px;
  gap:8px;
  align-items:center;
  margin:18px 0;
  font-size:12px;
}
.attribute-icon {
  font-size:18px;
  color:var(--forest);
}
.attribute-label {
  color:var(--text);
}
.attribute-level {
  font-size:10px;
  color:var(--muted);
  text-align:right;
}
progress {
  appearance:none;
  border:none;
  width:100%;
  height:6px;
  border-radius:8px;
  background:#e3e8db;
  overflow:hidden;
}
progress::-webkit-progress-bar {
  background:#e3e8db;
  border-radius:8px;
}
progress::-webkit-progress-value {
  background:var(--green);
  border-radius:8px;
  transition:width .5s;
}
progress::-moz-progress-bar {
  background:var(--green);
  border-radius:8px;
}
.attribute-row:nth-child(2) progress::-webkit-progress-value {
  background:var(--blue);
}
.attribute-row:nth-child(2) progress::-moz-progress-bar {
  background:var(--blue);
}
.attribute-row:nth-child(3) progress::-webkit-progress-value {
  background:#b08743;
}
.attribute-row:nth-child(3) progress::-moz-progress-bar {
  background:#b08743;
}
.day-strip {
  display:flex;
  gap:8px;
  justify-content:space-between;
  margin-top:24px;
}
.day {
  display:grid;
  gap:7px;
  text-align:center;
  font-size:10px;
  color:var(--muted);
}
.day b {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#edf0e6;
  color:#77856c;
  font-size:13px;
}
.day.observed b {
  background:#dbe7cc;
  color:#426a37;
}
.fine-print {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
}
.customize-card {
  padding:22px 24px;
}
.customize-card form {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
label {
  font-size:12px;
  color:#52634f;
  display:block;
}
input,select {
  display:block;
  width:100%;
  background:#fffef9;
  border:1px solid #bfcbb6;
  border-radius:8px;
  color:var(--text);
  min-height:44px;
  padding:10px 12px;
  font-size:13px;
  margin-top:7px;
}
input::placeholder {
  color:#727f6c;
}
.editor-actions {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  border-top:1px solid var(--border);
  padding-top:15px;
}
#customize-status {
  margin-right:auto;
  font-size:11px;
  color:var(--muted);
}
.keepsakes {
  background:transparent;
  padding:20px 24px;
}
.badges {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.badge {
  background:#eeeee0;
  border:1px solid #dcdcc6;
  border-radius:25px;
  padding:8px 11px;
  font-size:11px;
  color:#6c6a41;
}
.lifecycle {
  display:flex;
  gap:7px;
  margin-bottom:22px;
}
.phase-step {
  flex:1;
  border:1px solid var(--border);
  text-align:left;
  min-height:44px;
  background:#edf0e6;
  padding:12px;
  border-radius:8px;
  color:var(--muted);
  font-size:11px;
}
.phase-step.active {
  background:var(--forest);
  color:#fffef5;
  border-color:var(--forest);
}
.phase-step.done {
  color:var(--forest);
}
.phase-step:hover {
  border-color:var(--forest);
}
.arena-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:24px;
}
.wager-panel h2 {
  font-size:28px;
  line-height:1.2;
}
.wager-quote {
  padding:20px 0;
  font-family:Georgia,serif;
  font-size:22px;
  line-height:1.5;
  color:var(--forest);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin:23px 0;
  overflow-wrap:anywhere;
}
.wager-panel form {
  display:grid;
  gap:14px;
}
.acceptance {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 15px;
}
.acceptance span {
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:30px;
  font-size:11px;
  color:var(--muted);
}
.acceptance .accepted {
  color:#386135;
  border-color:#a5b99b;
  background:#edf3e7;
}
.secret-panel {
  text-align:center;
  background:#e9eee0;
}
.opponent-art {
  width:200px;
  max-width:100%;
  margin:0 auto;
}
.secret-panel h3 {
  font-size:20px;
}
.secret-panel p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  max-width:300px;
  margin:13px auto;
}
.training-action {
  margin-top:26px;
}
.strategy-panel {
  margin-top:24px;
}
.strategy-panel>p {
  font-size:12px;
  color:var(--muted);
}
.strategy-panel h2 {
  margin-bottom:0;
}
fieldset {
  border:0;
  padding:0;
  margin:24px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  min-width:0;
}
.strategy {
  position:relative;
  border:1px solid var(--border);
  background:#fafbf4;
  border-radius:12px;
  padding:22px;
  cursor:pointer;
  display:grid;
  gap:11px;
}
.strategy input {
  position:absolute;
  right:15px;
  top:16px;
  width:17px;
  height:17px;
  min-height:0;
  margin:0;
  accent-color:var(--forest);
}
.strategy:has(input:checked) {
  border-color:var(--forest);
  background:#e6eddb;
}
.strategy-icon {
  font-size:28px;
  color:var(--forest);
}
.strategy strong {
  font-weight:600;
  font-size:20px;
  color:var(--text);
}
.strategy>span:last-child {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.dev-controls {
  margin:22px 0;
  display:flex;
  align-items:center;
  gap:16px;
  font-size:10px;
  letter-spacing:.7px;
  color:var(--muted);
}
.text-button {
  background:transparent;
  border:none;
  color:var(--forest);
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:12px;
  padding:10px;
  min-height:44px;
}
.battle-shell {
  border:1px solid #355548;
  border-radius:18px;
  overflow:hidden;
  background:#234737;
  color:#f2f4e7;
}
.battle-top {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:18px 24px;
  background:#1f4033;
  font-size:11px;
  letter-spacing:1px;
  color:#e6d5a2;
}
.arena-location {
  color:#b9ccb5;
  font-size:9px;
}
.battle-arena {
  height:390px;
  display:flex;
  align-items:end;
  justify-content:space-around;
  padding:20px 25px 45px;
  position:relative;
  background:radial-gradient(ellipse at 50% 15%,#8eaa86 0,#526f55 35%,#2a4c3e 80%);
  overflow:hidden;
}
.arena-moon {
  position:absolute;
  top:35px;
  left:calc(50% - 34px);
  width:68px;
  height:68px;
  border-radius:50%;
  background:#f4edcd;
  box-shadow:0 0 70px #edebba50;
  opacity:.85;
}
.arena-floor {
  position:absolute;
  bottom:-90px;
  left:-10%;
  width:120%;
  height:250px;
  border-radius:50%;
  background:linear-gradient(#708b66,#355a41);
  border-top:2px solid #a9ba8457;
}
.fighter {
  position:relative;
  z-index:2;
  width:34%;
  max-width:260px;
  text-align:center;
}
.fighter-name {
  font-size:18px;
  line-height:1.4;
  color:#f6f4e7;
  overflow-wrap:anywhere;
}
.fighter>progress {
  height:7px;
  width:80%;
  margin:12px 0;
}
.fighter-art {
  width:100%;
  position:relative;
}
.fighter-art svg {
  width:100%;
  display:block;
}
.fighter.right .fighter-art svg {
  transform:scaleX(-1);
}
.arena-vs {
  align-self:center;
  color:#dae2ca;
  font-size:18px;
  z-index:1;
}
.damage {
  position:absolute;
  top:35%;
  left:42%;
  font-weight:800;
  font-size:29px;
  color:#ffe3a0;
  text-shadow:0 2px 5px #172e24;
  opacity:0;
}
.damage.pop {
  animation:damage-pop 1.3s ease-out;
}
.battle-effect {
  position:absolute;
  top:50%;
  left:calc(50% - 25px);
  font-size:50px;
  color:#f5d28b;
  opacity:0;
  pointer-events:none;
  z-index:3;
}
.battle-effect.burst {
  animation:burst 1.4s ease-out;
}
.battle-narration {
  padding:17px 26px 22px;
  text-align:center;
  min-height:105px;
}
.battle-narration p {
  font-size:15px;
  line-height:1.6;
  color:#e2ebd6;
  min-height:28px;
  margin:8px 0 17px;
}
.battle-narration progress {
  width:60%;
  height:3px;
}
.battle-controls {
  display:flex;
  gap:12px;
  justify-content:center;
  margin:24px 0;
  flex-wrap:wrap;
}
.result-panel {
  text-align:center;
  border:1px solid #c7cfaf;
  border-radius:16px;
  padding:32px;
  background:#edf1df;
  margin-top:24px;
}
.result-panel h2 {
  font-size:34px;
  color:var(--forest);
}
.result-panel>p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.result-panel #reward-text {
  font-family:Georgia,serif;
  font-size:23px;
  color:var(--forest);
  margin:15px 0;
}
.result-panel button {
  margin-top:16px;
}
.head-to-head {
  margin:26px 0;
  padding:25px;
  background:#e8eddf;
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:35px;
}
.head-to-head strong {
  font-size:40px;
  color:var(--forest);
}
.head-to-head span {
  font-size:14px;
  color:var(--muted);
}
.history-list {
  display:grid;
  gap:17px;
}
.history-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:25px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
}
.history-card h2 {
  font-size:23px;
}
.history-card p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}
.history-card .history-reward {
  font-size:14px;
  color:var(--forest);
}
.history-actions {
  display:grid;
  gap:12px;
}
.history-card label {
  display:flex;
  align-items:center;
  gap:8px;
}
.history-card input {
  width:18px;
  height:18px;
  min-height:0;
  margin:0;
  accent-color:var(--forest);
}
.history-empty {
  text-align:center;
  padding:60px 20px;
  border:1px dashed #bfcbb6;
  border-radius:15px;
  color:var(--muted);
  font-size:20px;
}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--border);
  margin-top:35px;
  padding:20px 0;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
}
footer b {
  color:var(--gold);
  margin:0 8px;
}
footer span:last-child {
  letter-spacing:0;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
:focus-visible {
  outline:3px solid #b17a30;
  outline-offset:4px;
}
.readiness-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  margin-bottom:23px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.readiness-panel.ready {
  border-color:#b2c59e;
  background:#e6efda;
}
.recovery-note {
  padding:18px;
  margin:0 0 20px!important;
  border:1px solid #b3a17e;
  border-radius:12px;
  background:#fff4da;
  color:var(--text)!important;
}
.readiness-panel h2 {
  font-size:23px;
  margin:0 0 9px;
  color:var(--forest);
}
.readiness-panel p,.showdown-readiness {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}
#enter-showdown {
  flex-shrink:0;
  min-height:48px;
}
.showdown-readiness {
  text-align:center;
  margin-top:20px;
}
.training-report {
  border-top:1px solid #c3cfb5;
  margin-top:28px;
  padding-top:25px;
  text-align:left;
}
.training-report h3 {
  font-size:24px;
  color:var(--forest);
}
.training-report>p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
}
.report-fighters {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:20px 0;
}
.report-fighter {
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  background:var(--surface);
}
.report-fighter h4 {
  margin:0 0 16px;
  font-size:14px;
  color:var(--forest);
}
.report-fighter p {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}
.report-fighter strong {
  color:var(--green);
}
.report-privacy {
  border-left:2px solid var(--forest);
  padding:10px 15px;
  background:#e1e9d6;
}
.fighter.fainted .fighter-art {
  opacity:.6;
  transform:translateY(10px) rotate(-12deg);
}
.fighter.fainted .face ellipse:nth-of-type(-n+2) {
  transform-box:fill-box;
  transform-origin:center;
  transform:scaleY(.2);
}
.fighter.fainted .face circle {
  opacity:0;
}
.account-card {
  padding:24px;
  margin:24px auto;
  max-width:760px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:18px;
  overflow-wrap:anywhere;
}
#daily-entry {
  margin:0;
  max-width:none;
}
#daily-entry p {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.account-card h1,.account-card h3,.account-card h4 {
  color:var(--text);
}
.account-card label {
  display:block;
  margin:12px 0;
}
.account-card input {
  display:block;
  max-width:100%;
  padding:12px;
  font:inherit;
}
.account-card button {
  margin:8px 12px 8px 0;
}
.account-card form {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
}
.idle .creature-body {
  animation:breathe 4s ease-in-out infinite;
  transform-origin:150px 250px
}
.idle .tail {
  animation:tail-sway 4s ease-in-out infinite;
  transform-origin:208px 221px
}
.idle .leaves {
  animation:leaf-sway 4s ease-in-out infinite;
  transform-origin:150px 112px
}
.fighter.enter .fighter-art {
  animation:enter .9s ease-out
}
.fighter.strike .fighter-art {
  animation:strike .7s ease-in-out
}
.fighter.right.strike .fighter-art {
  animation:strike-right .7s ease-in-out
}
.fighter.hurt .fighter-art {
  animation:hurt .7s ease-in-out
}
.fighter.guard .fighter-art {
  filter:drop-shadow(0 0 18px #addbc7)
}
.fighter.special .fighter-art {
  animation:special .9s ease-in-out;
  filter:drop-shadow(0 0 25px #ffcf95)
}
.fighter.winner .fighter-art {
  animation:celebrate 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 25px #ffcf95)
}
.fighter.loser .fighter-art {
  opacity:.65
}
.home-creature-grow {
  animation:celebrate 1.5s ease-in-out!important
}
@keyframes breathe {
  50% {
    transform:translateY(-7px) scale(1.015,1.02)
  }
}
@keyframes tail-sway {
  50% {
    transform:rotate(6deg)
  }
}
@keyframes leaf-sway {
  50% {
    transform:rotate(-4deg)
  }
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(50px) scale(.8)
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
@keyframes strike {
  45% {
    transform:translateX(45px) rotate(8deg)
  }
  65% {
    transform:translateX(28px)
  }
}
@keyframes strike-right {
  45% {
    transform:translateX(-45px) rotate(-8deg)
  }
  65% {
    transform:translateX(-28px)
  }
}
@keyframes hurt {
  25%,65% {
    transform:translateX(-6px);
    opacity:.4
  }
  45%,85% {
    transform:translateX(6px);
    opacity:1
  }
}
@keyframes special {
  50% {
    transform:translateY(-25px) scale(1.08)
  }
}
@keyframes celebrate {
  50% {
    transform:translateY(-16px) rotate(4deg)
  }
}
@keyframes damage-pop {
  15% {
    opacity:1;
    transform:translateY(-5px)
  }
  100% {
    opacity:0;
    transform:translateY(-65px)
  }
}
@keyframes burst {
  35% {
    opacity:1;
    transform:scale(1.5) rotate(30deg)
  }
  100% {
    opacity:0;
    transform:scale(2.6) rotate(90deg)
  }
}
@media(min-width:1600px) {
  main {
    padding:32px 60px;
  }
  .creature-art {
    width:300px;
  }
}
@media(max-width:1150px) {
  .sidebar {
    width:185px;
    padding:30px 14px;
  }
  main {
    padding:24px;
  }
  .home-grid {
    gap:18px;
  }
  .countdown-card,.development-card,.customize-card {
    padding:20px;
  }
  .attribute-row {
    grid-template-columns:18px 72px minmax(20px,1fr) 50px;
    gap:5px;
    font-size:11px;
  }
  .countdown {
    font-size:32px;
  }
  .editor-actions {
    justify-content:flex-start;
  }
  #customize-status {
    width:100%;
  }
  .strategy {
    padding:20px 16px;
  }
}
@media(max-width:850px) {
  .layout {
    display:block;
  }
  .sidebar {
    width:100%;
    padding:18px 22px 12px;
    border-right:0;
    border-bottom:1px solid var(--border);
    display:block;
  }
  .logo {
    font-size:9px;
    line-height:1.2;
    gap:9px;
    padding:0;
  }
  .logo b {
    font-size:16px;
  }
  .logo-mark {
    font-size:30px;
  }
  .sidebar-bottom {
    display:none;
  }
  .sidebar nav {
    display:flex;
    overflow:auto;
    gap:5px;
    margin-top:16px;
  }
  .nav {
    white-space:nowrap;
    font-size:11px;
    padding:10px;
    gap:7px;
  }
  .nav span {
    font-size:15px;
    min-width:14px;
  }
  .health-link {
    margin:0;
    padding:10px;
    border:0;
    border-radius:9px;
  }
  .topbar {
    padding-bottom:16px;
  }
  .home-grid {
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  }
  .creature-art {
    width:250px;
  }
  .creature-stage {
    min-height:350px;
    padding:20px;
  }
  .arena-grid {
    gap:16px;
  }
  .wager-panel,.secret-panel {
    padding:22px;
  }
}
@media(max-width:620px) {
  .prototype-banner {
    font-size:9px;
    line-height:1.6;
  }
  .prototype-banner span {
    display:block;
  }
  .sidebar {
    padding:14px 16px 10px;
  }
  .nav {
    font-size:11px;
  }
  .nav span {
    display:none;
  }
  main {
    padding:18px 16px;
  }
  .breadcrumb {
    font-size:8px;
    letter-spacing:.5px;
  }
  .perspective {
    font-size:10px;
    gap:7px;
  }
  .perspective select {
    width:92px;
    font-size:12px;
  }
  .message {
    margin:12px 0 18px;
    font-size:11px;
  }
  .heading-row {
    align-items:start;
    margin-bottom:20px;
  }
  .heading-row>.pill {
    display:none;
  }
  h1 {
    font-size:32px;
  }
  .heading-row p {
    font-size:12px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.3px;
  }
  .home-grid,.arena-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .creature-stage {
    min-height:310px;
    padding:18px;
  }
  .creature-art {
    width:220px;
    margin:-10px auto -12px;
  }
  .creature-caption h2 {
    font-size:30px;
  }
  .scene-sun {
    width:160px;
    height:160px;
    top:55px;
    left:calc(50% - 80px);
  }
  .customize-card {
    padding:20px;
  }
  .customize-card form {
    gap:12px;
  }
  input,select {
    font-size:16px;
    padding:10px;
  }
  #customize-status {
    width:auto;
  }
  .editor-actions {
    gap:4px;
  }
  .editor-actions .secondary {
    padding:10px 12px;
  }
  .countdown-card,.development-card {
    padding:24px;
  }
  .countdown {
    font-size:36px;
  }
  .attribute-row {
    grid-template-columns:22px 84px minmax(20px,1fr) 56px;
    gap:7px;
    font-size:12px;
  }
  .day-strip {
    gap:4px;
    justify-content:space-around;
  }
  .keepsakes {
    padding:22px;
  }
  .lifecycle {
    gap:4px;
    flex-wrap:wrap;
  }
  .phase-step {
    padding:10px 5px;
    text-align:center;
    font-size:9px;
  }
  .strategy-panel {
    padding:23px 18px;
  }
  .strategy-panel .card-heading {
    align-items:start;
  }
  .strategy-panel h2 {
    font-size:24px;
  }
  fieldset {
    grid-template-columns:1fr;
    gap:10px;
  }
  .strategy {
    grid-template-columns:32px 1fr;
    padding:16px;
    gap:8px;
  }
  .strategy-icon {
    grid-row:1/3;
    font-size:24px;
  }
  .strategy strong {
    font-size:20px;
  }
  .strategy>span:last-child {
    padding-right:10px;
    max-width:90%;
  }
  .strategy input {
    top:21px;
  }
  .strategy-panel .primary {
    width:100%;
  }
  .dev-controls {
    flex-wrap:wrap;
    gap:5px;
    font-size:9px;
  }
  .battle-top {
    padding:16px;
    font-size:9px;
    letter-spacing:.5px;
  }
  .arena-location {
    font-size:8px;
  }
  .battle-arena {
    height:320px;
    padding:15px 8px 48px;
  }
  .fighter {
    width:42%;
  }
  .fighter-name {
    font-size:15px;
  }
  .fighter>progress {
    width:85%;
    height:6px;
    margin:9px 0;
  }
  .arena-vs {
    font-size:14px;
  }
  .battle-narration {
    padding:15px 17px;
  }
  .battle-narration p {
    font-size:14px;
    min-height:45px;
  }
  .battle-controls {
    gap:10px;
  }
  .battle-controls>.primary {
    width:100%;
  }
  .result-panel {
    padding:29px 20px;
  }
  .result-panel h2 {
    font-size:29px;
  }
  .result-panel #reward-text {
    font-size:20px;
  }
  .history-card {
    grid-template-columns:1fr;
    padding:23px;
  }
  .history-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
  }
  .head-to-head {
    gap:22px;
    padding:22px 10px;
  }
  .head-to-head strong {
    font-size:34px;
  }
  .readiness-panel {
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    padding:21px;
  }
  #enter-showdown {
    width:100%;
  }
  .report-fighters {
    grid-template-columns:1fr;
  }
  footer {
    font-size:8px;
    letter-spacing:.4px;
  }
  footer span:last-child {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.action-status{font-size:14px;line-height:1.6;overflow-wrap:anywhere;color:var(--forest)}
.action-status:empty{display:none}
.hp-text,.fighter-role{display:block;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;color:#fffef5;position:relative;z-index:2}
.fighter-role{min-height:1.5em;font-weight:700;color:#f4dda5}
.fighter.strike .fighter-name,.fighter.special .fighter-name{border-bottom:2px solid #f4dda5}
.fighter.hurt .fighter-name,.fighter.guard .fighter-name{border-bottom:2px solid #d5e9d0}
.battle-event{font-weight:650;color:#f4dda5;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.battle-narration #narration{font-size:14px;line-height:1.6}
.training-disclosure,.timeline-disclosure{text-align:left;margin-top:20px;border-top:1px solid var(--border);padding-top:8px;color:var(--text)}
.training-disclosure>summary,.timeline-disclosure>summary{cursor:pointer;font-size:16px;line-height:1.6;min-height:44px;padding:12px 0}
.training-disclosure .training-report{border:0;margin:0;padding-top:16px}
#battle-timeline{font-size:14px;line-height:1.7;padding-left:24px;overflow-wrap:anywhere}
#battle-timeline li{margin:12px 0}
.fighter-name{overflow-wrap:anywhere}
@media(max-width:620px){
  .battle-arena{height:365px}
  .fighter>progress{height:10px}
  .battle-top{font-size:12px;flex-wrap:wrap}
  .arena-location{font-size:12px}
  .battle-controls>*{flex:1 1 42%;min-height:44px}
  .battle-narration{padding:16px}
  .battle-narration p{min-height:0}
}

/* Current phase comes before the workshop in DOM and keyboard order. */
.current-phase{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;margin-bottom:24px}
.current-phase h2{font-size:26px;line-height:1.2;margin:10px 0;color:#fffef5}
.current-phase p{font-size:14px;line-height:1.6;margin:8px 0;color:#e0e9db;overflow-wrap:anywhere}
.current-phase .eyebrow{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.current-phase .countdown{font-size:19px;margin:0 0 6px;letter-spacing:0}
.current-phase .primary{margin-top:12px}
.current-phase .text-button{color:#f0e2bc;padding:8px 0;min-height:44px;font-size:14px}
.customize-card>summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:16px}
.customize-card[open]>summary{margin-bottom:14px}
.strategy-matchup{font-weight:650;color:var(--forest);font-size:14px}
.strategy-panel>p{font-size:14px;line-height:1.65}
.strategy>span:not(.strategy-icon){line-height:1.6;font-size:14px}
.primary,.secondary{font-size:14px}
@media(max-width:620px){
  .sidebar nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;gap:6px;margin-top:10px}
  .sidebar nav .nav{white-space:normal;justify-content:center;min-width:0;min-height:44px;font-size:14px;padding:8px 3px;overflow-wrap:anywhere}
  .sidebar nav [data-screen=showdown]{display:none}
  .sidebar nav [data-screen=home]{order:1}
  .sidebar nav [data-screen=arena]{order:2}
  .sidebar nav .health-link{order:3}
  .sidebar nav [data-screen=history]{order:4}
  .topbar .breadcrumb{display:none}
  .message{font-size:13px;line-height:1.5;margin:10px 0}
  .heading-row{margin-bottom:14px}
  .heading-row h1{font-size:28px}
  .heading-row p{font-size:13px}
  .current-phase{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px;margin-bottom:18px}
  .current-phase h2{font-size:24px;margin:6px 0}
  .current-phase .phase-action>p{font-size:13px}
  .current-phase .countdown{font-size:17px}
  .customize-card{padding:12px 20px}
  .strategy-icon{grid-row:1/4}
  .strategy>span:not(.strategy-icon){grid-column:2}
  .fine-print,.quiet,.acceptance span,.development-card p{font-size:13px}
  .phase-step{font-size:12px;min-height:44px}
}

.fighter-name,.hp-text,.fighter-role{background:#1f4033;border-radius:4px;padding:3px 6px}
.home-right{grid-template-columns:minmax(0,1fr)}
.home-right>*{min-width:0}
@media(max-width:620px){
  .card-heading{flex-wrap:wrap}
  .card-heading h3,.attribute-label,.attribute-level{min-width:0;overflow-wrap:anywhere}
  .badges .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}