/* A soft paper-and-coral counter in the cats' sunlit room. */
:root { --ink: #513b32; --ink-soft: #8c7060; --line: #bd9575; --accent: #d96c54; --accent-dark: #ac4c3c; --shadow: 0 4px 0 #ba957b; --shadow-deep: 0 6px 0 #ba957b; }
#topbar { top: max(12px,env(safe-area-inset-top)); padding: 0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); }
.topbar-btn,.lang-switch { min-height: 44px; display: inline-flex; align-items: center; border: 1px solid #be9d7770; box-shadow: 0 3px 0 #b697772b; background: #fff9eced; }
.lang-btn { min-width: 44px; padding: 12px; }
#menu::after { background: linear-gradient(90deg,#fff6e324,#fff6e354 50%,#fff6e320); }
#menu { max-width: 1240px; }
.menu-panel { background: #fffaf0f5; background-image: none; border: 2px solid #fffdf4; border-radius: 34px; padding: 30px; box-shadow: 0 8px 0 #bc977e,0 24px 50px #49301826; gap: 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-panel::before,.menu-panel::after { display: none; }
#menu .title-wrap { gap: 12px; }
.menu-kicker { color: #b98969; font-size: 9px; letter-spacing: .2em; font-weight: 750; }
#menu h1 { color: #895e47; font-size: clamp(36px,4.5vw,62px); font-weight: 900; letter-spacing: -.06em; line-height: 1.1; text-shadow: 0 3px #fff,0 5px #e4c4a8; }
#menu .tagline { color: #92725d; font-size: 14px; font-weight: 500; line-height: 1.6; margin: 0; }
#menu .best-card { border: 1px solid #e2cdb7; border-radius: 18px; padding: 12px 18px; min-height: 66px; background: #f4ead9; box-shadow: inset 0 1px #fff; }
#menu .best-card::before,#menu .best-card::after { display: none; }
#menu .best-label { font-size: 11px; color: #a28266; }
#menu .best-value { color: #885e46; font-size: 32px; }
#menu .menu-btns { gap: 12px; }
.btn,#menu .btn { min-height: 48px; border: 1px solid #dec3ad; border-radius: 15px; background: #fffcf6; color: #805b48; box-shadow: 0 4px 0 #d8bba2; background-image: none; }
.btn-primary,#menu .btn-primary { min-height: 56px; background: #df8166; border-color: #edae8e; color: #fffdf5; text-shadow: 0 1px #b46e50; box-shadow: 0 5px 0 #b6614c,0 10px 18px #b76b4524; }
#menu #play-btn::before { content: '▶'; margin-right: 10px; font-size: 12px; }
.btn-secondary:hover,.btn-ghost:hover { background: #f7ebd8; }
#menu .title-emoji { width: clamp(220px,29vw,380px); height: clamp(220px,29vw,380px); }
.evolution-tower__label { background: #fffbef; color: #a67e56; border: 1px solid #dec3a5; box-shadow: 0 3px 0 #bda17e; font-weight: 700; }
#game { --icon-size: 44px; --hud-border: 1px; --field-max-width: 470px; max-width: 510px; max-height: 100%; width: 100%; height: 100%; gap: 12px; padding: 16px 20px 22px; }
.hud { flex-shrink: 0; min-height: 88px; background: #fffbf1; border: 1px solid #e0c9b1; border-radius: 22px; box-shadow: 0 4px 0 #d6bca4; }
.icon-btn { min-width: 44px; min-height: 44px; border: 1px solid #dcc0a5; background: #fff8e9; box-shadow: 0 3px 0 #d7bba2; border-radius: 14px; }
.stat-value { color: #805b48; font-size: 30px; }
.stat-label { color: #b38b68; }
.next-stat canvas { background: #f3e9d9; border: 1px solid #d3bca1; border-radius: 12px; }
.game-tier-strip { flex-shrink: 0; border: 1px solid #dfc8b1; border-radius: 18px; background: #fcf5e8; box-shadow: 0 3px 0 #dac3a9; }
.game-tier-cell { border-color: #e7d6c2; background: #fffaf1; }
.game-tier-strip::before { display: none; }
#canvas { border: 4px solid #fff9e8; border-radius: 24px; background: linear-gradient(180deg,#f4f4df,#e7edda 88%,#dce2c7 88%); box-shadow: 0 7px 0 #b59172,0 18px 30px #70534024; }
.game-hint { color: #a88a72; font-weight: 500; margin: 0; padding: 0; font-size: 11px; }
.modal { padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); touch-action: pan-y; }
.modal-body { background: #fffaf0; background-image: none; border: 2px solid #fffdf5; border-radius: 28px; box-shadow: 0 7px 0 #b8957b,0 28px 70px #50372255; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; }
.modal-body::before,.modal-body::after { display: none; }
.modal-body input { min-height: 48px; font-size: 16px; border: 1px solid #d9bfa6; border-radius: 12px; }
.rank-body { background-image: none; }
.rank-row { border: 1px solid #e7d8c2; border-radius: 12px; background: #f8efdf; }
.btn:focus-visible,.icon-btn:focus-visible { outline: 3px solid #aa7050; outline-offset: 5px; }
#canvas:focus-visible { outline: 3px solid #a4815a; outline-offset: 4px; }
@media (max-width: 759px) and (orientation: portrait) {
  #menu { padding: 66px 20px 18px; grid-template-rows: minmax(120px,1fr) auto auto; gap: 16px; }
  .menu-panel { padding: 24px; gap: 18px; border-radius: 28px; }
  .menu-visual { width: min(100%,340px); height: min(29dvh,250px); min-height: 120px; }
  #menu .title-emoji { width: min(48vw,24dvh); height: min(48vw,24dvh); }
  .evolution-tower { height: min(25dvh,220px); flex-basis: 120px; }
  #menu h1 { font-size: clamp(34px,10vw,44px); }
  #game { gap: 9px; padding: 12px 14px 18px; }
  .game-tier-strip { min-height: 48px; padding: 5px 6px; }
  .game-tier-cell:last-child { border-width: 1px; background: #f0e2c9; box-shadow: none; }
}
@media (orientation: portrait) and (max-height: 680px) {
  #menu { gap: 10px; padding: 64px 16px 14px; grid-template-rows: minmax(72px,1fr) auto; }
  #menu .credit { display: none; }
  .menu-panel { padding: 18px; gap: 12px; }
  #menu .title-wrap { gap: 8px; }
  #menu h1 { font-size: 32px; }
  #menu .tagline { font-size: 12px; }
  #menu .best-card { min-height: 44px; padding: 6px 14px; }
  #menu .best-value { font-size: 26px; }
  #menu .menu-btns { gap: 10px; }
  #menu .btn { min-height: 44px; font-size: 12px; }
  #menu .btn-primary { min-height: 48px; }
  .menu-visual { min-height: 72px; height: 100%; }
  #menu .title-emoji { width: min(32vw,18dvh); height: min(32vw,18dvh); }
  .evolution-tower { height: min(19dvh,110px); flex-basis: 88px; }
  #game { padding: 10px 12px 16px; gap: 8px; }
  .hud { min-height: 76px; padding: 8px 10px; }
  .stat-value { font-size: 25px; }
  .game-tier-strip { min-height: 40px; }
}
@media (orientation: landscape) {
  #app { display: flex; }
  #app::before,.rotate-lock { display: none; }
}
@media (orientation: landscape) and (max-height: 620px) {
  #menu { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: 'visual panel'; padding: 62px 24px 20px; gap: 24px; }
  #menu .credit,.evolution-tower { display: none; }
  .menu-visual { width: 100%; height: 100%; min-height: 0; justify-content: center; align-items: center; }
  #menu .title-emoji { width: min(32vw,58dvh); height: min(32vw,58dvh); }
  .menu-panel { width: 100%; padding: 18px; gap: 12px; border-radius: 24px; }
  #menu .title-wrap { gap: 8px; }
  #menu h1 { font-size: clamp(28px,4.8vw,42px); }
  #menu .best-card { min-height: 42px; padding: 5px 12px; }
  #menu .best-value { font-size: 24px; }
  #menu .menu-btns { gap: 10px; }
  #menu .btn { min-height: 44px; padding: 8px; font-size: 12px; }
  #menu .tagline { font-size: 11px; }
  #game { max-width: 1050px; display: grid; grid-template-columns: minmax(180px,1fr) minmax(0,1.2fr) minmax(130px,.75fr); grid-template-rows: 1fr auto 1fr; padding: 14px 22px 18px; gap: 12px 22px; }
  .hud { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  .hud .score-stat { grid-column: 1; grid-row: 1; }
  .hud .next-stat { grid-column: 2; grid-row: 1; }
  .hud .icon-btn { width: 100%; }
  .field-wrap { grid-column: 2; grid-row: 1 / -1; height: 100%; }
  .game-tier-strip { grid-column: 3; grid-row: 2; grid-template-columns: 1fr 1fr; align-self: center; }
  .game-tier-text { display: none; }
  .game-tier-cell { display: grid; place-items: center; grid-template-columns: 1fr; padding: 3px; }
  .game-tier-cell canvas { width: 28px; height: 28px; }
  .game-hint { grid-column: 1; grid-row: 3; align-self: start; text-align: center; }
}
@media (orientation: landscape) and (max-height: 380px) {
  #menu { padding-top: 58px; gap: 18px; }
  .menu-panel { padding: 12px 16px; gap: 8px; }
  #menu .menu-kicker,#menu .tagline,#menu .best-card { display: none; }
  #menu h1 { font-size: 29px; }
  #game { grid-template-columns: minmax(150px,1fr) minmax(0,1.15fr); padding: 12px 20px 18px; }
  .game-tier-strip { display: none; }
}
/* The cushion frame is sliced so its wood corners keep their shape at every width. */
:root { --crafted-frame: url('assets/ui/crafted-frame-v1.webp'); }
#menu { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(120px,1fr) auto; grid-template-areas: 'visual' 'panel'; }
.menu-panel,.modal-body { border: 22px solid transparent; border-image: var(--crafted-frame) 275 fill / 22px / 0 stretch; border-radius: 0; background: none; box-shadow: 0 14px 32px #69401d2b; padding: 18px; gap: 18px; }
#menu h1 { color: #774a2b; text-shadow: 0 2px #fff8e3,0 4px #d3ac76; }
.btn,#menu .btn,.btn:hover,#menu .btn:hover { position: relative; isolation: isolate; min-height: 54px; border: 0; background: none; box-shadow: none; color: #694127; font-weight: 800; padding: 14px 20px; text-shadow: 0 1px #fff9e3; }
.btn::after,#menu .btn::after { content: ''; position: absolute; inset: -1px; z-index: -1; border: 14px solid transparent; border-image: var(--crafted-frame) 275 fill / 14px / 0 stretch; filter: drop-shadow(0 3px 1px #a271474d); transition: filter .15s; }
.btn:hover::after,#menu .btn:hover::after { filter: brightness(1.06) drop-shadow(0 4px 2px #a271474d); }
.btn:active,#menu .btn:active { transform: translateY(3px); box-shadow: none; }
#menu #play-btn::before { content: none; }
#menu #play-btn { min-height: 74px; padding: 14px 40px; color: #633217; font-size: 22px; text-shadow: 0 1px #ffce9c; }
#menu #play-btn::after { border: 0; inset: -2px -6px; background: url('assets/ui/crafted-button-v1.webp') center / 100% 150% no-repeat; }
.icon-btn,.icon-btn.muted,.topbar-btn,.lang-switch { background: none; border: 12px solid transparent; border-image: var(--crafted-frame) 275 fill / 12px / 0 stretch; box-shadow: none; border-radius: 0; }
.icon-btn { padding: 0; }
.topbar-btn { padding: 0 6px; }
.lang-switch { border-width: 6px; padding: 0; }
.lang-btn { min-height: 32px; display: grid; place-items: center; padding: 7px 10px; }
.lang-btn.active { border-radius: 10px; }
.hud { border: 16px solid transparent; border-image: var(--crafted-frame) 275 fill / 16px / 0 stretch; border-radius: 0; background: none; box-shadow: none; padding: 0 4px; }
#menu .best-card { min-height: 54px; border: 0; background: #d1ab6721; box-shadow: inset 0 1px #c5a17280,inset 0 -1px #fff; padding: 10px 14px; }
.evolution-tower { padding-top: 0; }
.how-list,.tier-preview,.rank-content { color: #65442c; }
#menu .best-label,.stat-label { color: #805c3c; }
#how-close,#rank-close { position: sticky; bottom: 0; z-index: 2; width: 100%; }
@media (min-width: 760px) and (orientation: portrait) {
  #menu { gap: 24px; padding-bottom: max(32px,env(safe-area-inset-bottom)); }
  .menu-panel { width: min(100%,520px); justify-self: center; }
  .menu-visual { width: min(100%,520px); height: min(34dvh,360px); justify-self: center; }
  #menu .title-emoji { width: min(38vw,30dvh); height: min(38vw,30dvh); }
}
@media (min-width: 760px) and (min-height: 621px) and (orientation: landscape) {
  #menu { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr); grid-template-areas: 'visual panel'; }
}
@media (max-width: 759px) and (orientation: portrait) {
  .menu-panel { width: 100%; padding: 14px; border-width: 18px; border-image-width: 18px; }
  #menu .btn { min-height: 52px; font-size: 14px; }
  #menu #play-btn { min-height: 72px; font-size: 21px; }
}
@media (orientation: portrait) and (max-height: 680px) {
  #menu { grid-template-rows: minmax(72px,1fr) auto; }
  .menu-panel { padding: 10px; gap: 10px; }
  #menu .best-card { min-height: 44px; padding: 6px 10px; }
  #menu .btn { min-height: 48px; font-size: 13px; padding: 10px 18px; }
  #menu #play-btn { min-height: 62px; font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  #menu { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: 'visual panel'; }
  .menu-panel { border-width: 16px; border-image-width: 16px; padding: 8px 12px; gap: 10px; }
  #menu .btn { min-height: 46px; font-size: 13px; padding: 10px 18px; }
  #menu #play-btn { min-height: 60px; font-size: 20px; }
  .hud { padding: 8px; }
}
@media (orientation: landscape) and (max-height: 380px) {
  .menu-panel { gap: 6px; padding: 4px 8px; }
  #menu h1 { font-size: 27px; }
  #menu .menu-btns { gap: 6px; }
  #menu #play-btn { min-height: 54px; }
  #menu .btn { min-height: 44px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }