/* PETOPIA: the 2005 pet site, rebuilt crisp. One token sheet, then the frame (top bar, pet sidebar, main, footer), the boxes,
   the buttons, the page banners, then each page. Sized for 1920 x 945 first; a phone gets one column. */
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin-var.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --sun: #ffc93c; --sun-l: #ffe07a; --sun-xl: #fff3c4; --sun-d: #f0a81a; --sun-dd: #c97f07;
  --sky: #74c8ff; --sky-l: #d8f0ff; --sky-d: #2b86d6; --royal: #2347a8; --royal-d: #172f73;
  --leaf: #5fbf3c; --leaf-d: #3a8a1f; --berry: #ec4f86; --berry-d: #b82a5e; --grape: #7b52cc; --grape-d: #553196; --tang: #ff8a2b; --tang-d: #cc5f0c;
  --ink: #3a2816; --ink-2: #6a5340; --ink-3: #9a8571; --line: #ead7ab; --line-2: #f3e6c6;
  --paper: #fffdf6; --paper-2: #fff7e2; --white: #fff;
  --link: #1f5fbf; --good: #2f9e44; --bad: #d63b3b;
  --f-d: 'Fredoka', 'Baloo 2', 'Trebuchet MS', sans-serif; --f-t: 'Nunito', 'Segoe UI', system-ui, sans-serif; --f-m: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r: 16px; --r-s: 10px; --ease: cubic-bezier(.2, .7, .2, 1);
  --frame: 1440px; --side: 268px;
  /* the line of colour, ink and white that every heading in the site's cartoon voice wears */
  --outline: 0 2px 0 var(--ink), 2px 0 0 var(--ink), 0 -2px 0 var(--ink), -2px 0 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 5px 0 rgba(58, 40, 22, .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 500 15px/1.5 var(--f-t); overflow-x: hidden;
  background: #9bd9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff' fill-opacity='.45'%3E%3Cpath d='M20 8l2.6 5.4 5.9.8-4.3 4.1 1 5.9L20 21.4l-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z'/%3E%3Cpath d='M82 62l1.9 3.9 4.3.6-3.1 3 .7 4.3L82 71.8l-3.8 2 .7-4.3-3.1-3 4.3-.6z'/%3E%3Ccircle cx='60' cy='24' r='2.2'/%3E%3Ccircle cx='104' cy='100' r='2.6'/%3E%3Ccircle cx='30' cy='92' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .25) 55%, rgba(170, 225, 140, .5) 100%); pointer-events: none; }
a { color: var(--link); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sun-l); color: var(--ink); }
:focus-visible { outline: 3px solid var(--sky-d); outline-offset: 2px; border-radius: 6px; }
.is-hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the frame */
.page { width: min(var(--frame), 100vw - 24px); margin: 10px auto 18px; }
.top { position: relative; height: 104px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 22px 0 18px;
  border-radius: 22px 22px 0 0; border: 3px solid var(--sun-dd); border-bottom-width: 4px;
  background: radial-gradient(120% 140% at 50% -40%, #fff3b0 0%, rgba(255, 243, 176, 0) 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 6l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.6-4.8 2.6.9-5.4-3.9-3.8 5.4-.8z' fill='%23ffffff' fill-opacity='.38'/%3E%3Cpath d='M48 38l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z' fill='%23f0a81a' fill-opacity='.32'/%3E%3C/svg%3E"), linear-gradient(180deg, #ffd85c 0%, #ffc531 70%, #fbb620 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 4px 0 rgba(150, 95, 0, .25); }
.logo { display: flex; align-items: center; gap: 2px; text-decoration: none !important; height: 100%; }
.logo-pet { width: 76px; height: 76px; margin: 4px -6px 0 -6px; filter: drop-shadow(0 3px 0 rgba(120, 70, 0, .3)); transform: rotate(-6deg); transition: transform .3s var(--ease); }
.logo:hover .logo-pet { transform: rotate(4deg) translateY(-2px); }
.logo-word { position: relative; font: 700 52px/1 var(--f-d); letter-spacing: -.01em; color: #fff; text-shadow: var(--outline); padding: 0 14px 6px 4px; }
.logo-word .lw-b { color: #bfe9ff; }
.logo-star { position: absolute; right: 0; top: -2px; width: 22px; height: 22px; background: radial-gradient(circle at 40% 35%, #fff 0 18%, #ffe066 20% 60%, #f0a81a 62%); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(18deg); } }
.mainnav { justify-self: center; display: flex; gap: 6px; }
.mainnav a { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 104px; padding: 6px 4px 5px; border-radius: 16px; color: var(--ink); font: 600 15px/1.1 var(--f-d); letter-spacing: .01em; text-decoration: none; transition: transform .15s var(--ease), background .15s; }
.mainnav a img { width: 50px; height: 50px; filter: drop-shadow(0 2px 0 rgba(120, 70, 0, .28)); transition: transform .2s var(--ease); }
.mainnav a:hover { background: rgba(255, 255, 255, .42); }
.mainnav a:hover img { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
.mainnav a.on { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 2px rgba(201, 127, 7, .35); }
.topright { justify-self: end; display: flex; align-items: center; min-width: 230px; justify-content: flex-end; }
.who { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 800; }
.who-hi { font: 600 17px/1.1 var(--f-d); }
.who-hi a { color: var(--royal); }
.who-pb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 2px solid rgba(201, 127, 7, .35); font-size: 14px; }
.who-pb b { font: 700 16px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.who-out { display: flex; gap: 8px; }
body.is-out .who, body.is-in .who-out { display: none; }

.body { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); background: var(--paper); border-left: 3px solid var(--sun-dd); border-right: 3px solid var(--sun-dd); min-height: 640px; }
body.is-out .body { grid-template-columns: minmax(0, 1fr); }
body.is-out .side { display: none; }
.side { background: linear-gradient(180deg, #ffe998 0%, #ffe07e 100%); border-right: 3px solid var(--sun-d); padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.main { min-width: 0; padding: 18px 22px 26px; }
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 22px; border: 3px solid var(--sun-dd); border-top-width: 4px; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #ffd04a, #f7b524); font: 600 14px/1.2 var(--f-d); color: var(--ink); }
.foot-links { display: flex; gap: 14px; }
.foot-links a { color: var(--ink); font-weight: 600; }
.foot-x { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 999px; background: #111; color: #fff !important; text-decoration: none !important; }
.foot-x:hover { background: #333; } .foot-x.is-hidden { display: none; }
.foot-pot { text-align: center; font-variant-numeric: tabular-nums; }
.foot-c { text-align: right; color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------------- sidebar boxes */
.sbox { background: var(--white); border: 2px solid var(--sun-d); border-radius: 14px; box-shadow: 0 3px 0 rgba(201, 127, 7, .35); overflow: hidden; }
.ribbon { margin: 0; padding: 6px 12px 5px; text-align: center; font: 600 19px/1.15 var(--f-d); background: linear-gradient(180deg, #6fc6ff, #3d9be6); border-bottom: 2px solid #2b7bc0; color: #fff; text-shadow: 0 2px 0 rgba(20, 60, 120, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ribbon a { color: #fff; }
.sb-pic { display: block; padding: 4px 10px 0; background: radial-gradient(circle at 50% 62%, #fff8d8 0%, #fff 62%); }
.sb-pic img { width: 168px; height: 168px; margin: 0 auto; transition: transform .25s var(--ease); }
.sb-pic:hover img { transform: translateY(-3px) scale(1.03); }
.sb-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; margin: 0; padding: 4px 14px 10px; font-size: 13.5px; line-height: 1.45; }
.sb-stats dt { font-weight: 800; color: var(--ink-2); }
.sb-stats dd { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.sb-pebbles, .sb-clock { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.sb-pebbles img, .sb-clock img { width: 34px; height: 34px; }
.sb-pebbles b, .sb-clock b { display: block; font: 700 22px/1.05 var(--f-d); font-variant-numeric: tabular-nums; }
.sb-clock b { font-size: 19px; }
.sb-pebbles span, .sb-clock span { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.sb-online { padding: 7px 12px; font-size: 13px; font-weight: 800; }
.sb-online b { font: 700 16px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.sb-on { display: flex; align-items: center; gap: 6px; }
.sb-play { color: var(--ink-2); padding-left: 16px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3ccf5c; box-shadow: 0 0 0 3px rgba(60, 207, 92, .2); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(60, 207, 92, 0); } }
.sb-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; padding: 2px 0; }
.sb-links a { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 10px; color: var(--ink); font: 600 14.5px/1.15 var(--f-d); white-space: nowrap; min-width: 0; }
.sb-links a img { width: 24px; height: 24px; flex: none; }
.sb-links a:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.side .ca-pill { position: static; max-width: none; flex-wrap: wrap; height: auto; padding: 8px 10px; border-radius: 14px; gap: 6px; }

/* ---------------------------------------------------------------- the building blocks */
.box { background: var(--white); border: 2px solid var(--line); border-radius: var(--r); box-shadow: 0 3px 0 var(--line-2); overflow: hidden; }
.box > h3, .box-h { margin: 0; padding: 7px 14px 6px; font: 600 19px/1.2 var(--f-d); color: #5a3a00; background: linear-gradient(180deg, #ffe07a, #ffc93c); border-bottom: 2px solid var(--sun-d); display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.box > h3 img, .box-h img { width: 28px; height: 28px; }
.box > h3 .more, .box-h .more { margin-left: auto; font: 700 13.5px/1 var(--f-t); color: var(--royal); text-shadow: none; }
.box.blue > h3 { background: linear-gradient(180deg, #8fd3ff, #52adf0); border-color: #2f8ad6; color: #fff; text-shadow: 0 2px 0 rgba(20, 60, 120, .45); }
.box.green > h3 { background: linear-gradient(180deg, #9fe27a, #64c241); border-color: #3f9724; color: #fff; text-shadow: 0 2px 0 rgba(30, 80, 10, .45); }
.box.pink > h3 { background: linear-gradient(180deg, #ff9cc2, #ef5d92); border-color: #c63a6e; color: #fff; text-shadow: 0 2px 0 rgba(120, 20, 60, .45); }
.box.grape > h3 { background: linear-gradient(180deg, #b493f0, #8a62d8); border-color: #6a43b5; color: #fff; text-shadow: 0 2px 0 rgba(60, 20, 120, .45); }
.box-b { padding: 12px 14px; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--leaf-d); cursor: pointer; white-space: nowrap; overflow: hidden;
  font: 600 18px/1 var(--f-d); letter-spacing: .01em; color: #fff; text-decoration: none !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
  background: linear-gradient(180deg, #8fdc5c 0%, #55b52f 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #2f7417; transition: transform .1s, box-shadow .1s, filter .15s; user-select: none; -webkit-user-select: none; }
.btn::before { content: ''; position: absolute; left: 10%; right: 10%; top: 2px; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .05)); pointer-events: none; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #2f7417; }
.btn:disabled { filter: grayscale(.8) brightness(1.05); opacity: .6; cursor: default; transform: none; }
.btn-blue { border-color: #1f6fb8; background: linear-gradient(180deg, #7cc8ff 0%, #3a92e0 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #17548c; }
.btn-blue:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #17548c; }
.btn-orange { border-color: var(--tang-d); background: linear-gradient(180deg, #ffb14d 0%, #ff8124 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #a64b06; }
.btn-orange:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #a64b06; }
.btn-pink { border-color: var(--berry-d); background: linear-gradient(180deg, #ff8ab5 0%, #ec4f86 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #8f1f49; }
.btn-gold { color: #5a3a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); border-color: var(--sun-dd); background: linear-gradient(180deg, #ffe680 0%, #ffbf2a 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 #a86a05; }
.btn-ghost { color: var(--ink); text-shadow: none; border-color: var(--line); background: #fff; box-shadow: 0 3px 0 var(--line); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 15.5px; }
.btn-lg { height: 58px; padding: 0 34px; font-size: 23px; }
.input { height: 44px; width: 100%; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--sky-d); box-shadow: 0 0 0 4px rgba(43, 134, 214, .15); }
textarea.input { height: auto; min-height: 110px; padding: 10px 14px; resize: vertical; line-height: 1.45; }
label.f { display: grid; gap: 5px; font: 600 15px/1.2 var(--f-d); color: var(--ink-2); }
.note { color: var(--ink-2); font-size: 14px; }
.err { color: var(--bad); font-weight: 800; font-size: 14px; min-height: 20px; }
.ok { color: var(--good); font-weight: 800; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 700 12px/1 var(--f-t); letter-spacing: .02em; background: var(--paper-2); border: 1.5px solid var(--line); color: var(--ink-2); }
.tag.staff { background: #fff0f6; border-color: #ffb3cf; color: var(--berry-d); }
.sol { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the page banner: a painted strip with the page's name in the site's outlined cartoon type */
.banner { position: relative; height: 118px; border-radius: 20px; margin: 0 0 16px; overflow: hidden; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 4px 0 rgba(58, 40, 22, .25);
  background: radial-gradient(90% 160% at 85% -20%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(120deg, var(--b1, #6fc6ff), var(--b2, #2b86d6)); }
.banner::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M20 10l2.6 5.4 5.9.8-4.3 4.1 1 5.9L20 23.4l-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z' fill='%23fff' fill-opacity='.22'/%3E%3Ccircle cx='60' cy='56' r='3' fill='%23fff' fill-opacity='.25'/%3E%3C/svg%3E"); pointer-events: none; }
.banner .b-pet { position: absolute; left: 14px; bottom: -10px; width: 150px; height: 150px; z-index: 1; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.banner .b-pet.b-icon { width: 96px; height: 96px; bottom: 10px; left: 30px; }
.banner h1 { position: absolute; left: 180px; top: 18px; margin: 0; z-index: 1; font: 700 46px/1 var(--f-d); color: #fff; text-shadow: var(--outline); letter-spacing: -.005em; white-space: nowrap; }
.banner p { position: absolute; left: 182px; top: 74px; margin: 0; z-index: 1; font: 700 16px/1.2 var(--f-t); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .28); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner .b-side { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; gap: 10px; align-items: center; }
.bn-sky { --b1: #84d2ff; --b2: #2b86d6; } .bn-sun { --b1: #ffe066; --b2: #ff9f1c; } .bn-leaf { --b1: #a8e57d; --b2: #3d9e23; }
.bn-berry { --b1: #ff9cc6; --b2: #e2457f; } .bn-grape { --b1: #b99af5; --b2: #6b45c2; } .bn-tang { --b1: #ffc070; --b2: #f2711c; } .bn-royal { --b1: #6c8cf0; --b2: #2347a8; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.stack { display: grid; gap: 14px; }

/* toasts and windows */
.toasts { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 10px 20px; border-radius: 999px; background: #fff; border: 2px solid var(--sun-d); box-shadow: 0 6px 20px rgba(58, 40, 22, .2); font: 600 16px/1.2 var(--f-d); animation: toastIn .35s var(--ease); }
.toast.bad { border-color: var(--bad); color: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.modal-host { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(40, 28, 10, .45); padding: 16px; }
.modal-host.on { display: grid; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border: 3px solid var(--sun-dd); border-radius: 22px; box-shadow: 0 6px 0 rgba(120, 70, 0, .35), 0 30px 80px rgba(40, 20, 0, .35); animation: popIn .32s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.modal-h { padding: 12px 18px 10px; font: 700 26px/1.1 var(--f-d); color: #fff; text-shadow: var(--outline); background: linear-gradient(180deg, #8fd3ff, #4aa6ea); border-bottom: 3px solid #2f7fc4; display: flex; align-items: center; gap: 10px; }
.modal-h .x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(58, 40, 22, .8); background: #fff; color: var(--ink); text-shadow: none; font: 700 18px/1 var(--f-d); cursor: pointer; }
.modal-b { padding: 16px 18px 18px; }

/* ---------------------------------------------------------------- the landing (logged out) */
.land { display: grid; gap: 16px; }
.hero { position: relative; height: 436px; border-radius: 22px; overflow: hidden; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 5px 0 rgba(58, 40, 22, .25); background: #8fd3ff url('/art/scenes/welcome.webp') center 62% / cover no-repeat; }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 18% 8%, rgba(18, 40, 90, .62) 0%, rgba(18, 40, 90, .28) 45%, rgba(18, 40, 90, 0) 75%), linear-gradient(90deg, rgba(20, 50, 100, 0) 55%, rgba(20, 50, 100, .3) 100%), linear-gradient(0deg, rgba(30, 20, 5, .3) 0%, rgba(30, 20, 5, 0) 26%); pointer-events: none; z-index: 1; }
.hero-head { position: absolute; left: 30px; top: 22px; z-index: 2; }
.hero-pot, .hero-card { z-index: 2; }
.hero-head h1 { margin: 0; font: 700 58px/1 var(--f-d); color: #fff; text-shadow: var(--outline); letter-spacing: -.01em; }
.hero-head p { margin: 10px 0 0 4px; font: 600 21px/1.3 var(--f-d); color: #fff; text-shadow: 0 2px 0 rgba(20, 20, 50, .8), 0 0 14px rgba(15, 30, 80, .9); max-width: 520px; }
.hero-card { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 2; width: 360px; background: rgba(255, 253, 246, .97); border: 3px solid rgba(58, 40, 22, .85); border-radius: 22px; box-shadow: 0 6px 0 rgba(58, 40, 22, .3), 0 24px 60px rgba(20, 30, 60, .35); overflow: hidden; }
.hero-card .hc-h { padding: 10px 16px 8px; background: linear-gradient(180deg, #ffe07a, #ffc93c); border-bottom: 3px solid var(--sun-d); font: 700 23px/1.1 var(--f-d); color: #5a3a00; text-align: center; }
.hero-card .hc-b { padding: 14px 18px 16px; display: grid; gap: 10px; }
.hero-card .btn-lg { width: 100%; }
.hc-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--ink-3); font: 700 13px/1 var(--f-t); text-transform: uppercase; letter-spacing: .1em; }
.hc-or::before, .hc-or::after { content: ''; height: 2px; background: var(--line); }
.hc-login { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.hc-login .input { height: 40px; font-size: 14.5px; padding: 0 10px; }
.hc-login .btn { height: 40px; padding: 0 14px; font-size: 16px; }
.hc-guest { text-align: center; font: 600 15px/1.2 var(--f-d); }
.hero-pot { position: absolute; left: 30px; bottom: 22px; z-index: 2; display: flex; gap: 12px; }
.pot-chip { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 16px; background: rgba(255, 253, 246, .95); border: 2.5px solid rgba(58, 40, 22, .8); box-shadow: 0 4px 0 rgba(58, 40, 22, .25); }
.pot-chip img { width: 40px; height: 40px; }
.pot-chip b { display: block; font: 700 22px/1.05 var(--f-d); font-variant-numeric: tabular-nums; }
.pot-chip span { display: block; font: 800 12px/1.2 var(--f-t); color: var(--ink-2); }
.land-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; height: 236px; }
.land-row > .box { min-height: 0; }
.newest { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 10px 10px 12px; }
.newest a { display: grid; justify-items: center; gap: 2px; color: var(--ink); font: 600 14px/1.1 var(--f-d); text-align: center; min-width: 0; }
.newest a img { width: 92px; height: 92px; transition: transform .2s var(--ease); }
.newest a:hover img { transform: translateY(-4px) rotate(-3deg); }
.newest a span, .newest a small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newest a small { color: var(--ink-3); font: 700 11.5px/1 var(--f-t); }
.sb-links .sb-guide { grid-column: 1 / -1; }
.sb-guide b { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .7); font: 700 12px/1.3 var(--f-d); color: var(--ink-2); }
.sb-guide b:empty { display: none; } .sb-guide b.hot { background: #ff6b6b; color: #fff; animation: flash 1s linear infinite; }
.scorelist { list-style: none; margin: 0; padding: 4px 8px 8px; display: grid; gap: 2px; }
.scorelist li { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 10px; font-weight: 700; font-size: 14px; }
.scorelist li:nth-child(odd) { background: var(--paper-2); }
.scorelist li .rk { font: 700 15px/1 var(--f-d); color: var(--ink-3); text-align: center; }
.scorelist li:nth-child(1) .rk { color: #d9a300; } .scorelist li:nth-child(2) .rk { color: #8f9aa8; } .scorelist li:nth-child(3) .rk { color: #c07a3a; }
.scorelist li img { width: 36px; height: 36px; }
.scorelist li .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scorelist li .nm small { display: block; color: var(--ink-3); font-size: 12px; }
.scorelist li .sc { font: 700 16px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.scorelist .empty { grid-template-columns: 1fr; color: var(--ink-3); font-weight: 700; text-align: center; padding: 14px; background: none !important; }
.news { padding: 8px 14px 10px; display: grid; gap: 6px; }
.news article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.news article img { width: 40px; height: 40px; }
.news h4 { margin: 0; font: 600 16px/1.15 var(--f-d); }
.news h4 a { color: inherit; text-decoration: none; } .news h4 a:hover { color: var(--royal); text-decoration: underline; }
.news p { margin: 1px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news time { display: none; }

/* ---------------------------------------------------------------- forms pages (sign up, log in) */
.formpage { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.formcard { padding: 18px 20px 20px; display: grid; gap: 12px; }
.formcard .btn { justify-self: start; }
.side-art { border-radius: 20px; overflow: hidden; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 4px 0 rgba(58, 40, 22, .25); }

/* ---------------------------------------------------------------- create a pet */
.steps { display: flex; gap: 8px; margin: 0 0 12px; }
.steps span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font: 600 15px/1 var(--f-d); color: var(--ink-3); }
.steps span i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); font: 700 13px/1 var(--f-d); font-style: normal; }
.steps span.on { border-color: var(--sky-d); color: var(--royal); } .steps span.on i { background: var(--sky-d); color: #fff; }
.steps span.done { border-color: var(--leaf); color: var(--leaf-d); } .steps span.done i { background: var(--leaf); color: #fff; }
.species { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sp { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 10px 12px; border-radius: 18px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line-2); cursor: pointer; text-align: center; transition: transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.sp:hover { transform: translateY(-3px); border-color: var(--sun-d); }
.sp.on { border-color: var(--sky-d); box-shadow: 0 4px 0 #1f6fb8, 0 0 0 5px rgba(43, 134, 214, .18); }
.sp img { width: 150px; height: 150px; transition: transform .25s var(--ease); }
.sp:hover img { transform: scale(1.05) rotate(-2deg); }
.sp b { font: 700 22px/1 var(--f-d); }
.sp p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); min-height: 52px; }
.maker { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; align-items: start; }
.maker-pic { position: relative; border-radius: 22px; border: 3px solid var(--line); background: radial-gradient(circle at 50% 60%, #fff 0%, #fff6d8 55%, #ffe9a8 100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.maker-pic img { width: 92%; height: 92%; transition: opacity .2s; }
.maker-pic .mp-name { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 700 30px/1 var(--f-d); color: #fff; text-shadow: var(--outline); }
.swatches { display: flex; gap: 12px; }
.sw { width: 74px; height: 74px; border-radius: 20px; border: 3px solid rgba(58, 40, 22, .75); cursor: pointer; position: relative; box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), 0 4px 0 rgba(58, 40, 22, .25); transition: transform .12s; }
.sw:hover { transform: translateY(-2px); }
.sw.on { outline: 4px solid var(--sky-d); outline-offset: 3px; }
.sw span { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font: 600 14px/1 var(--f-d); color: var(--ink-2); }
.sw-red { background: #ef4b45; } .sw-blue { background: #4a9ff0; } .sw-green { background: #5cc24a; } .sw-yellow { background: #ffd23a; }
.gender { display: flex; gap: 10px; }
.gender button { height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: 600 17px/1 var(--f-d); cursor: pointer; }
.gender button.on { border-color: var(--sky-d); background: var(--sky-l); color: var(--royal); }
.namecheck { font-size: 14px; font-weight: 800; min-height: 20px; }
.adopted { text-align: center; padding: 10px 0 0; }
.adopted h2 { margin: 6px 0 0; font: 700 44px/1.05 var(--f-d); color: #fff; text-shadow: var(--outline); }
.adopted .ad-pic { width: 380px; height: 380px; margin: -6px auto 0; animation: hop 1.6s var(--ease) infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-2deg); } 60% { transform: translateY(0) rotate(1deg); } }
.adopted p { margin: 6px 0 14px; font-size: 17px; font-weight: 700; color: var(--ink-2); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(760px) rotate(720deg); opacity: .2; } }

/* ---------------------------------------------------------------- your pet */
.petpage { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 18px; align-items: start; }
.petstage { position: relative; border-radius: 22px; border: 3px solid var(--line); background: radial-gradient(circle at 50% 66%, #fff 0%, #fff4d1 50%, #ffe39a 100%); overflow: hidden; }
.petstage img { width: 380px; height: 380px; margin: 4px auto -6px; }
.petstage .ps-name { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font: 700 34px/1 var(--f-d); color: #fff; text-shadow: var(--outline); }
.petstage .ps-say { position: absolute; right: 12px; top: 58px; max-width: 190px; padding: 8px 12px; border-radius: 16px; background: #fff; border: 2px solid rgba(58, 40, 22, .7); font: 600 14.5px/1.25 var(--f-d); box-shadow: 0 3px 0 rgba(58, 40, 22, .2); }
.petstage .ps-say::after { content: ''; position: absolute; left: 18px; bottom: -11px; border: 9px solid transparent; border-top-color: rgba(58, 40, 22, .7); }
.stattable { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0; font-size: 14.5px; }
.stattable > div { padding: 6px 12px; border-bottom: 1.5px solid var(--line-2); }
.stats2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.stats2 > .stattable:first-child { border-right: 1.5px solid var(--line-2); }
.stattable .barline { margin-top: 4px; }
.stattable > div:nth-child(odd) { font-weight: 800; color: var(--ink-2); }
.stattable > div:nth-child(even) { font-weight: 700; }
.bar { position: relative; height: 16px; border-radius: 999px; background: var(--line-2); overflow: hidden; border: 1.5px solid var(--line); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(180deg, #8fdc5c, #4caf2c); }
.bar.warm i { background: linear-gradient(180deg, #ffd166, #f59f00); } .bar.cold i { background: linear-gradient(180deg, #ff9a8a, #e5484d); }
.barline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pick { display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; text-align: center; font: 600 13px/1.15 var(--f-d); transition: transform .12s, border-color .12s; }
.pick:hover { transform: translateY(-2px); border-color: var(--sun-d); }
.pick img { width: 64px; height: 64px; }
.pick .q { color: var(--ink-3); font: 800 11.5px/1 var(--f-t); }
.empty-note { color: var(--ink-3); font-weight: 700; padding: 10px 2px; }

/* the pets list */
.petcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.petcard { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 10px 14px; border-radius: 18px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line-2); text-align: center; }
.petcard.on { border-color: var(--sun-d); background: linear-gradient(180deg, #fffbe9, #fff); }
.petcard img { width: 190px; height: 190px; }
.petcard b { font: 700 22px/1.1 var(--f-d); }
.petcard small { color: var(--ink-2); font-weight: 700; }
.petcard .act { position: absolute; top: 10px; right: 10px; }
.petcard.new { border-style: dashed; place-content: center; min-height: 300px; color: var(--ink-3); font: 600 18px/1.2 var(--f-d); cursor: pointer; }
.petcard.new img { width: 90px; height: 90px; opacity: .85; }

/* ---------------------------------------------------------------- maps */
.mapwrap { position: relative; border-radius: 22px; overflow: hidden; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 5px 0 rgba(58, 40, 22, .25); background: #6fbf54; }
.mapwrap { width: min(100%, calc((100vh - 292px) * 1.5059)); margin: 0 auto; }
.mapwrap > img.map { width: 100%; height: auto; aspect-ratio: 2048 / 1360; }
.spot { position: absolute; display: block; border-radius: 22px; text-decoration: none !important; }
.spot .lbl { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap; padding: 5px 14px 4px; border-radius: 999px; background: #fff; border: 2.5px solid rgba(58, 40, 22, .85); box-shadow: 0 3px 0 rgba(58, 40, 22, .3); font: 700 16px/1 var(--f-d); color: var(--ink); transition: transform .18s var(--ease), background .18s; }
.spot::before { content: ''; position: absolute; inset: 6%; border-radius: 26px; background: radial-gradient(closest-side, rgba(255, 250, 200, .55), rgba(255, 250, 200, 0)); opacity: 0; transition: opacity .2s; }
.spot:hover::before { opacity: 1; }
.spot:hover .lbl { transform: translateX(-50%) translateY(-4px) scale(1.06); background: var(--sun-l); }
.world-dim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.region { position: absolute; transform: translate(-50%, -50%); padding: 5px 12px 4px; border-radius: 999px; background: rgba(40, 40, 60, .62); border: 2px solid rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .88); font: 600 14.5px/1 var(--f-d); white-space: nowrap; pointer-events: none; }
.region.lit { background: #fff; border: 2.5px solid rgba(58, 40, 22, .85); color: var(--ink); font-size: 18px; box-shadow: 0 3px 0 rgba(58, 40, 22, .3); pointer-events: auto; }
.region.lit:hover { background: var(--sun-l); text-decoration: none; }

/* ---------------------------------------------------------------- shops */
.shop-head { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-bottom: 14px; }
.shop-head .keeper { width: 200px; height: 200px; margin: -26px 0 -8px; filter: drop-shadow(0 4px 0 rgba(58, 40, 22, .18)); }
@media (min-width: 901px) { .shop-head { grid-template-columns: 150px minmax(0, 1fr) auto; margin-bottom: 10px; } .shop-head .keeper { width: 150px; height: 150px; margin: -22px 0 -6px; } .shop-head .bubble { font-size: 17px; padding: 10px 16px; } }
.bubble { position: relative; align-self: center; padding: 14px 18px; border-radius: 20px; background: #fff; border: 3px solid rgba(58, 40, 22, .75); box-shadow: 0 4px 0 rgba(58, 40, 22, .2); font: 600 19px/1.3 var(--f-d); }
.bubble::before { content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); border: 12px solid transparent; border-right: 14px solid rgba(58, 40, 22, .75); }
.bubble small { display: block; font: 700 13px/1.3 var(--f-t); color: var(--ink-3); margin-top: 4px; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ware { display: grid; justify-items: center; gap: 3px; padding: 10px 8px 12px; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line-2); cursor: pointer; text-align: center; transition: transform .14s var(--ease), border-color .14s; }
.ware:hover { transform: translateY(-3px); border-color: var(--sun-d); }
.ware img { width: 90px; height: 90px; }
.ware b { font: 600 15.5px/1.15 var(--f-d); min-height: 36px; display: grid; place-items: center; }
.ware .stock { font: 800 12px/1 var(--f-t); color: var(--ink-3); }
.ware .price { display: inline-flex; align-items: center; gap: 4px; font: 700 17px/1 var(--f-d); color: var(--royal); font-variant-numeric: tabular-nums; }
.ware .price img { width: 18px; height: 18px; }
.haggle { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.haggle .hg-item { width: 150px; height: 150px; border-radius: 20px; background: radial-gradient(circle, #fff 0%, #fff4d1 70%); border: 2px solid var(--line); display: grid; place-items: center; }
.haggle .hg-item img { width: 120px; height: 120px; }
.haggle .hg-ask { font: 700 16px/1.3 var(--f-d); color: var(--ink-2); }
.haggle .hg-ask b { color: var(--royal); font-size: 22px; }
.hg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 10px; }
.hg-say { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 14px; min-height: 72px; }
.hg-say img { width: 64px; height: 64px; }
.hg-say .bubble { font-size: 16px; padding: 10px 14px; }
.hg-say .bubble::before { left: -14px; border-width: 9px; border-right-width: 12px; }
.restock { font: 800 13px/1.2 var(--f-t); color: var(--ink-3); text-align: right; }

/* ---------------------------------------------------------------- inventory */
.inv { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.inv .it { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; text-align: center; font: 600 14px/1.15 var(--f-d); transition: transform .12s, border-color .12s; }
.inv .it:hover { transform: translateY(-2px); border-color: var(--sun-d); }
.inv .it img { width: 66px; height: 66px; }
.inv .it span { font-size: 12.5px; line-height: 1.1; min-height: 28px; display: grid; place-items: center; }
.inv .it small { color: var(--ink-3); font: 800 11.5px/1 var(--f-t); text-transform: capitalize; }
.use-menu { display: grid; gap: 8px; }
.use-menu .btn { width: 100%; justify-content: flex-start; }
.use-menu .btn img { width: 30px; height: 30px; }

/* ---------------------------------------------------------------- bank, pie */
.counter { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.counter .keeper { width: 220px; height: 220px; margin-top: -8px; }
.acct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.acct > div { padding: 10px 14px; border-right: 1.5px solid var(--line-2); }
.acct > div:last-child { border-right: 0; }
.acct span { display: block; font: 800 12.5px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.acct b { display: block; font: 700 26px/1.15 var(--f-d); font-variant-numeric: tabular-nums; }
.tiers { width: 100%; border-collapse: collapse; font-size: 14px; }
.tiers td, .tiers th { padding: 4px 12px; text-align: left; border-bottom: 1.5px solid var(--line-2); font-size: 13.5px; }
.tiers td small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 700; } .tiers td:last-child { text-align: right; font: 700 15px/1 var(--f-d); }
.dayrows { gap: 4px !important; } .dayrows .btn-sm { height: 29px; padding: 0 14px; font-size: 15px; } .dayrows img { width: 26px; height: 26px; }
.tiers th { font: 700 13px/1 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.tiers tr.on td { background: #fff7d1; font-weight: 800; }
.moneyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.bigpie { display: grid; place-items: center; padding: 10px; }
.bigpie img { width: 230px; height: 230px; animation: steam 3s ease-in-out infinite; }
@keyframes steam { 50% { transform: translateY(-4px) rotate(-1deg); } }

/* ---------------------------------------------------------------- the games room */
.gr-pot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 14px; }
.gr-pot > div { padding: 10px 16px; border-right: 1.5px solid var(--line-2); }
.gr-pot > div:last-child { border-right: 0; }
.gr-pot span { display: block; font: 800 12px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.gr-pot b { display: block; font: 700 28px/1.15 var(--f-d); font-variant-numeric: tabular-nums; }
.gr-pot b small { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.gr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gr-btns .btn { padding: 0 10px; min-width: 0; font-size: 17px; }
.gamecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.gamecard { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: #fff; border: 3px solid var(--line); border-radius: 20px; box-shadow: 0 4px 0 var(--line-2); overflow: hidden; transition: transform .15s var(--ease), border-color .15s; }
.gamecard:hover { transform: translateY(-3px); border-color: var(--sun-d); }
.gamecard .gc-art { position: relative; background: #ddd center / cover no-repeat; min-height: 186px; }
.gamecard .gc-art .new { position: absolute; left: 10px; top: 10px; }
.gamecard .gc-b { padding: 12px 16px; display: grid; gap: 6px; align-content: start; }
.gamecard h3 { margin: 0; font: 700 28px/1 var(--f-d); }
.gamecard p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gamecard .gc-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.gamecard .btn { justify-self: start; margin-top: 4px; }
.banks { list-style: none; margin: 0; padding: 6px 8px 8px; display: grid; gap: 2px; }
.banks li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.banks li:nth-child(odd) { background: var(--paper-2); }
.banks li img { width: 38px; height: 38px; }
.banks li .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banks li .nm small { display: block; color: var(--ink-3); font-size: 12px; }
.banks li .amt { font: 700 15px/1 var(--f-d); color: var(--leaf-d); font-variant-numeric: tabular-nums; text-align: right; }
.banks li .amt small { display: block; font: 800 11px/1.2 var(--f-t); color: var(--ink-3); }
.banks .empty { grid-template-columns: 1fr; text-align: center; color: var(--ink-3); padding: 14px; background: none !important; }

/* the game page: title card, then the game and its side panel */
.gamepage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.stage { position: relative; border-radius: 20px; overflow: hidden; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 5px 0 rgba(58, 40, 22, .25); background: #2a3a5a; user-select: none; -webkit-user-select: none; touch-action: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
.reconn { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(30, 20, 50, .45); }
.reconn > div { display: grid; gap: 4px; justify-items: center; padding: 16px 26px; border-radius: 20px; background: #fff; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 5px 0 rgba(58, 40, 22, .3); text-align: center; max-width: 80%; }
.reconn b { font: 700 26px/1.1 var(--f-d); } .reconn span { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.stage.chase { aspect-ratio: 26 / 18; }
.stage.bubbles { aspect-ratio: 1 / 1; }
.titlecard { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; background: #8fd3ff center / cover no-repeat; }
.titlecard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 15, 5, .62) 0%, rgba(20, 15, 5, 0) 46%); pointer-events: none; }
.tc-name { position: absolute; left: 24px; top: 18px; z-index: 1; font: 700 54px/1 var(--f-d); color: #fff; text-shadow: var(--outline); }
.tc-foot { position: relative; z-index: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 18px 22px; }
.tc-foot p { margin: 0; font: 600 17px/1.35 var(--f-d); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); max-width: 560px; }
.diffs { display: flex; gap: 8px; margin-bottom: 10px; }
.diffs button { height: 36px; padding: 0 16px; border-radius: 999px; border: 2.5px solid rgba(58, 40, 22, .85); background: rgba(255, 255, 255, .88); font: 600 16px/1 var(--f-d); cursor: pointer; }
.diffs button.on { background: var(--sun); }
.panel { display: grid; gap: 12px; }
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.readout > div { padding: 9px 12px; border-bottom: 1.5px solid var(--line-2); }
.readout > div:nth-child(odd) { border-right: 1.5px solid var(--line-2); }
.readout span { display: block; font: 800 11.5px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.readout b { display: block; font: 700 25px/1.1 var(--f-d); font-variant-numeric: tabular-nums; }
.worth { padding: 12px 14px; display: grid; gap: 4px; }
.worth .w-lab { font: 800 12px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.worth .w-amt { font: 700 34px/1 var(--f-d); color: var(--leaf-d); font-variant-numeric: tabular-nums; }
.worth .w-sub { font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.35; min-height: 36px; }
.bankbtn { position: relative; width: 100%; height: 74px; border-radius: 22px; border: 3px solid #2f7417; cursor: pointer; overflow: hidden; color: #fff; font: 700 25px/1 var(--f-d); text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(180deg, #8fdc5c, #4caf2c); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 5px 0 #2f7417; touch-action: none; user-select: none; -webkit-user-select: none; }
.bankbtn .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #ffe066, #ffb703); transition: none; }
.bankbtn .lab { position: relative; z-index: 1; display: grid; gap: 3px; }
.bankbtn .lab small { font: 800 12.5px/1 var(--f-t); letter-spacing: .04em; text-shadow: none; opacity: .92; }
.bankbtn.holding { border-color: #b07a00; color: #5a3a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.bankbtn.no { filter: grayscale(.7); }
.bank-why { min-height: 40px; font-size: 13.5px; font-weight: 800; color: var(--bad); line-height: 1.35; }
.stage:has(.titlecard) .hud { display: none; }
.hud { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; justify-content: space-between; pointer-events: none; z-index: 2; }
.hud .pill { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 2.5px solid rgba(58, 40, 22, .85); font: 700 19px/1 var(--f-d); font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 rgba(58, 40, 22, .25); }
.holdring { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; display: none; }
.holdring.on { display: block; }
.sheet { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(30, 20, 5, .5); padding: 14px; animation: fadeIn .25s; }
.sheet-card { width: min(470px, 100%); background: var(--paper); border: 3px solid rgba(58, 40, 22, .9); border-radius: 22px; box-shadow: 0 6px 0 rgba(58, 40, 22, .35); overflow: hidden; animation: popIn .35s var(--ease); }
.sheet-h { padding: 12px 18px 10px; font: 700 34px/1 var(--f-d); color: #fff; text-shadow: var(--outline); text-align: center; background: linear-gradient(180deg, #ff9cc2, #ef5d92); border-bottom: 3px solid #c63a6e; }
.sheet-h.win { background: linear-gradient(180deg, #a6e77c, #55b52f); border-color: #3a8a1f; }
.sheet-b { padding: 14px 18px 18px; display: grid; gap: 10px; text-align: center; }
.sheet-amt { font: 700 46px/1 var(--f-d); color: var(--leaf-d); font-variant-numeric: tabular-nums; }
.sheet-score { font: 700 20px/1.2 var(--f-d); color: var(--ink-2); }
.sheet-line { font-size: 14.5px; font-weight: 700; color: var(--ink-2); line-height: 1.4; }
.sheet-to { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px solid var(--line); text-align: left; font-size: 13.5px; font-weight: 800; }
.sheet-to code { font: 600 12.5px/1.2 var(--f-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tx-steps span { padding: 7px 4px; border-radius: 10px; background: var(--line-2); font: 700 12.5px/1.2 var(--f-t); color: var(--ink-3); }
.tx-steps span.done { background: #e4f8da; color: var(--leaf-d); }
.tx-steps span.now { background: #fff1c4; color: #8a5a00; }
.sheet-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.sheet-pebbles { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 18px/1 var(--f-d); color: var(--royal); }
.sheet-pebbles img { width: 26px; height: 26px; }
.keys { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 10px 14px; }
.keys kbd { display: inline-block; min-width: 24px; padding: 2px 6px; border-radius: 6px; border: 1.5px solid var(--line); border-bottom-width: 3px; background: #fff; font: 700 12px/1.2 var(--f-t); text-align: center; color: var(--ink); }

/* ---------------------------------------------------------------- boards */
.threads { width: 100%; border-collapse: collapse; }
.threads td, .threads th { padding: 9px 14px; border-bottom: 1.5px solid var(--line-2); text-align: left; font-size: 14.5px; }
.threads th { font: 800 12px/1 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; background: var(--paper-2); }
.threads td.t a { font: 600 17px/1.2 var(--f-d); }
.threads td.n, .threads th.n { text-align: center; width: 90px; font-variant-numeric: tabular-nums; }
.threads td.w { width: 220px; color: var(--ink-2); font-weight: 700; }
.threads td.l { width: 170px; color: var(--ink-3); font-weight: 700; font-size: 13px; }
.posts { display: grid; gap: 0; }
.post { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-bottom: 2px solid var(--line-2); }
.post .who-col { padding: 12px 10px; text-align: center; background: var(--paper-2); border-right: 2px solid var(--line-2); display: grid; justify-items: center; gap: 2px; align-content: start; }
.post .who-col img { width: 110px; height: 110px; }
.post .who-col b { font: 600 16px/1.1 var(--f-d); word-break: break-all; }
.post .who-col small { color: var(--ink-3); font-weight: 700; font-size: 12px; }
.post .body-col { padding: 12px 16px; min-width: 0; }
.post .body-col .meta { display: flex; gap: 10px; align-items: center; color: var(--ink-3); font-size: 12.5px; font-weight: 800; margin-bottom: 6px; }
.post .body-col .meta button { margin-left: auto; border: 0; background: none; color: var(--ink-3); font: 800 12px/1 var(--f-t); cursor: pointer; }
.post .body-col .meta button:hover { color: var(--bad); }
.post .body-col .txt { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- settings, help, ledger */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1.5px solid var(--line-2); }
.set-row b { font: 600 17px/1.2 var(--f-d); display: block; }
.set-row small { display: block; color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.switch { position: relative; width: 60px; height: 34px; border-radius: 999px; border: 2px solid rgba(58, 40, 22, .6); background: var(--line-2); cursor: pointer; flex: none; }
.switch i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid rgba(58, 40, 22, .6); transition: left .18s var(--ease); }
.switch.on { background: var(--leaf); } .switch.on i { left: 29px; }
input[type=range] { accent-color: var(--sky-d); width: 220px; }
.help h3 { font: 700 22px/1.2 var(--f-d); margin: 10px 0 4px; }
.helppage { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.help-tabs { display: grid; gap: 6px; }
.help-tabs button { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font: 600 17px/1 var(--f-d); color: var(--ink); cursor: pointer; text-align: left; }
.help-tabs button img { width: 32px; height: 32px; } .help-tabs button.on { background: linear-gradient(180deg, #8fd3ff, #52adf0); border-color: #2f8ad6; color: #fff; text-shadow: 0 2px 0 rgba(20, 60, 120, .45); }
.help .box-b { padding: 6px 22px 16px; } .help .howto { padding: 4px 0; }
.help-lands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.help-lands a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.help-lands a:hover { background: var(--sun-xl); } .help-lands img { width: 40px; height: 40px; } .help-lands b { display: block; font: 700 17px/1.1 var(--f-d); } .help-lands small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.help p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.help ul { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; font-size: 15px; }
.paytable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.paytable td, .paytable th { padding: 7px 12px; border-bottom: 1.5px solid var(--line-2); text-align: right; font-variant-numeric: tabular-nums; }
.paytable th { font: 800 12px/1 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; background: var(--paper-2); }
.paytable td:first-child, .paytable th:first-child { text-align: left; font-weight: 800; }
.paytable .pt-sc { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.paytable td b { font: 700 15px/1 var(--f-d); color: var(--leaf-d); }
.ledger-rows { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger-rows td, .ledger-rows th { padding: 6px 12px; border-bottom: 1.5px solid var(--line-2); text-align: left; }
.ledger-rows th { font: 800 12px/1 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; background: var(--paper-2); }
.ledger-rows td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-rows a { font: 600 12.5px/1 var(--f-m); }

/* ---------------------------------------------------------------- the four games room tiles, the game page's touch buttons */
.gr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
.gr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gt-kind { position: absolute; left: 8px; top: 8px; padding: 3px 9px 2px; border-radius: 999px; font: 700 12px/1.2 var(--f-d); border: 2px solid rgba(58, 40, 22, .7); }
.gt-kind.pot { background: #e5f8d8; color: #2f7417; } .gt-kind.peb { background: #fff4d1; color: #8a5a00; }
.gtile .gt-art { position: relative; }
.gamepage.nopot .bankbtn, .gamepage.nopot .bank-why { display: none; }
.gtile h3 { font-size: 22px !important; }
.gtile { position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; border: 3px solid var(--line); border-radius: 20px; box-shadow: 0 4px 0 var(--line-2); overflow: hidden; color: inherit; text-decoration: none !important; transition: transform .15s var(--ease), border-color .15s; }
.gtile:hover { transform: translateY(-3px); border-color: var(--sun-d); }
.gtile .gt-art { aspect-ratio: 16 / 7; background: #ddd center / cover no-repeat; }
.gtile .gt-b { padding: 10px 14px 12px; display: grid; gap: 6px; }
.gtile h3 { margin: 0; font: 700 25px/1 var(--f-d); }
.gtile .gt-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.gtile .gt-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-height: 34px; padding-right: 92px; min-width: 0; }
.gtile .gt-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.gtile .gt-top img { width: 34px; height: 34px; }
.gtile .gt-play { position: absolute; right: 12px; bottom: 12px; }
.gr-side { display: grid; gap: 14px; align-content: start; }
.gr-pot2 { display: grid; grid-template-columns: 1fr 1fr; }
.gr-pot2 > div { padding: 10px 14px; border-bottom: 1.5px solid var(--line-2); }
.gr-pot2 > div:nth-child(odd) { border-right: 1.5px solid var(--line-2); }
.gr-pot2 > div:nth-last-child(-n+2) { border-bottom: 0; }
.gr-pot2 span { display: block; font: 800 11.5px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.gr-pot2 b { display: block; font: 700 24px/1.15 var(--f-d); font-variant-numeric: tabular-nums; }
.tops4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.homegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hg-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hg-games a { position: relative; aspect-ratio: 2 / 1; border-radius: 12px; border: 2.5px solid rgba(58, 40, 22, .8); background: #ddd center / cover no-repeat; box-shadow: 0 3px 0 rgba(58, 40, 22, .2); overflow: hidden; transition: transform .15s var(--ease); }
.hg-games a:hover { transform: translateY(-2px) scale(1.03); }
.hg-games span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px 2px; background: rgba(255, 255, 255, .88); font: 700 13px/1.15 var(--f-d); color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 6px; font-size: 14px; }
.guide.mini { grid-template-columns: 1fr; padding: 0; gap: 4px; }
.guide.mini li { grid-template-columns: 22px minmax(0, 1fr) auto auto; grid-template-rows: auto; padding: 4px 8px; }
.guide.mini li .ck, .guide.mini li .gt { grid-row: auto; } .guide.mini li .gp, .guide.mini li .btn, .guide.mini li .tag { grid-column: auto; }
.guide.mini .ck { width: 20px; height: 20px; font-size: 12px; } .guide.mini .gt b { font-size: 14.5px; } .guide.mini .btn { height: 26px; padding: 0 10px; font-size: 13.5px; }
.tops4 > div > .note { padding: 4px 14px 0; font-weight: 800; }
.tops4 .scorelist li { grid-template-columns: 18px 28px minmax(0, 1fr) auto; padding: 1px 6px; font-size: 13.5px; } .tops4 .scorelist li img { width: 28px; height: 28px; }
.gp-top .scorelist { padding: 4px 6px 6px; }
.gp-top .scorelist li { padding: 1px 6px; }
/* the play column: the stage, and next to it (tall games) or under it (wide games) the pet that plays and today's top 5 */
.gp-play { display: grid; gap: 12px; min-width: 0; align-items: start; }
.gp-play.tall { grid-template-columns: minmax(180px, 1fr) minmax(0, 480px); }
.gp-play.tall .stage { width: 100%; }
.gp-play.tall .gp-under { order: -1; display: grid; gap: 12px; align-content: start; container-type: inline-size; }
.gp-play.wide .gp-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gp-under .box { min-width: 0; }
.gp-pet { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 14px; }
.gp-pet img { width: 104px; height: 104px; filter: drop-shadow(0 3px 0 rgba(58, 40, 22, .15)); }
.gp-pet .gpp-t { display: grid; gap: 3px; min-width: 0; }
.gp-pet .gpp-t > b { font: 700 22px/1.05 var(--f-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-pet .gpp-sub { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.gp-pet .gpp-st { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.gp-pet .gpp-st b { color: var(--ink); } .gp-pet .gpp-st b.bad { color: var(--bad); }
.gp-pet small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.gp-pet small a { font-weight: 800; }
.gp-play.wide .gp-under .box { height: 186px; overflow: hidden; }
.gp-play.wide .gp-top .scorelist li { padding: 0 6px; } .gp-play.wide .gp-top .scorelist li img { width: 26px; height: 26px; }
.gp-play.wide .gp-top .scorelist li { grid-template-columns: 20px 26px minmax(0, 1fr) auto; font-size: 13.5px; }
.gp-play .gp-top .scorelist li.empty { grid-template-columns: 1fr; }
.gp-pays .paytable td { padding: 6px 12px; }
@container (max-width: 280px) {
  .gp-pet { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
  .gp-pet img { width: 84px; height: 84px; }
  .gp-pet small:not(:has(a)) { display: none; }
  .gp-pays h3 { font-size: 17px; } .gp-pays .paytable td { padding: 5px 8px; font-size: 13px; }
  .gp-pet .gpp-st { justify-content: center; }
  .gp-top .scorelist li { grid-template-columns: 18px minmax(0, 1fr) auto; } .gp-top .scorelist li img { display: none; }
}
.tbtns { display: none; position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; justify-content: space-between; gap: 10px; pointer-events: none; }
.tbtns button { pointer-events: auto; width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(58, 40, 22, .8); background: rgba(255, 255, 255, .72); font: 700 30px/1 var(--f-d); color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; }
.tbtns button.on { background: var(--sun-l); }
.tbtns .tb-jump { margin-left: auto; }
@media (pointer: coarse) { .tbtns { display: flex; } }
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 8px; }
.pager button { min-width: 36px; height: 32px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font: 700 14px/1 var(--f-d); cursor: pointer; }
.pager button.on { border-color: var(--sun-d); background: var(--sun-xl); }
.pager button:disabled { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------- NFTs: Petopians and Treasures */
.nstat { display: grid; justify-items: center; padding: 6px 14px 5px; border-radius: 14px; background: rgba(255, 255, 255, .2); border: 2px solid rgba(255, 255, 255, .5); color: #fff; text-shadow: 0 2px 0 rgba(40, 10, 80, .35); min-width: 98px; }
.nstat b { font: 700 27px/1 var(--f-d); font-variant-numeric: tabular-nums; } .nstat span { font: 800 11px/1.3 var(--f-t); text-transform: uppercase; letter-spacing: .07em; }
.nbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: -4px 0 12px; }
.ntabs { display: flex; gap: 6px; flex: none; }
.ntabs a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px 0 7px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: 600 16.5px/1 var(--f-d); color: var(--ink); text-decoration: none; box-shadow: 0 3px 0 var(--line-2); }
.ntabs a img { width: 30px; height: 30px; }
.ntabs a.on { background: linear-gradient(180deg, #c3a8f7, #9670e3); border-color: #6a43b5; color: #fff; text-shadow: 0 2px 0 rgba(60, 20, 120, .4); box-shadow: 0 3px 0 #4f2f91; }
.nfil { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; flex: 1 1 100%; min-width: 0; }
.nfil:empty { display: none; }
.nfil .input { height: 38px; width: auto; flex: none; font-size: 14.5px; padding: 0 8px; border-radius: 10px; }
.nfil input.input { width: 230px; padding: 0 12px; }
.ngrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 901px) { .ngrid { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); } }
.ngrid > .empty-note { grid-column: 1 / -1; }
.ncard { display: block; border-radius: 16px; background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line-2); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.ncard:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--line-2); text-decoration: none; }
.nc-pic { position: relative; aspect-ratio: 1; background: var(--paper-2); }
.nc-pic img { width: 100%; height: 100%; display: block; }
.nc-n { position: absolute; left: 6px; top: 6px; padding: 3px 7px 2px; border-radius: 8px; background: rgba(30, 16, 50, .62); color: #fff; font: 700 13px/1.15 var(--f-d); }
.nc-rk { position: absolute; right: 6px; top: 6px; padding: 3px 7px 2px 21px; border-radius: 8px; background: rgba(255, 255, 255, .9) url('/art/icons/gem.webp') 3px 50% / 16px no-repeat; color: #5b3aa8; font: 700 12.5px/1.15 var(--f-d); }
.nc-rk.r1, .nc-rk.r2, .nc-rk.r3, .nc-rk.r4, .nc-rk.r5 { background-image: none; padding-left: 7px; }
.nc-rk.r1 { color: #7a6a58; } .nc-rk.r2 { color: #2f7417; } .nc-rk.r3 { color: #1f6fb8; } .nc-rk.r4 { color: #6a43b5; } .nc-rk.r5 { color: #b07a00; background: #fff4c2; }
.nc-st { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px 2px; border-radius: 999px; border: 1.5px solid; font: 700 12px/1.15 var(--f-d); }
.nc-st.ok { background: #e5f8d8; color: #2f7417; border-color: #8fd16a; } .nc-st.wait { background: #fff4d1; color: #8a5a00; border-color: #f2c14e; } .nc-st.bad { background: #ffe3ea; color: var(--bad); border-color: #ff9fb6; }
.nc-st.big { position: static; font-size: 15px; padding: 5px 12px 4px; }
.nc-b { padding: 6px 10px 8px; display: grid; min-width: 0; }
.nc-b b { font: 700 16px/1.15 var(--f-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-b small { color: var(--ink-3); font-weight: 700; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* one Petopian or Treasure */
.nftpage { display: grid; grid-template-columns: minmax(0, min(520px, calc(100vh - 300px))) minmax(0, 1fr); gap: 24px; align-items: start; }
.np-pic { border-radius: 22px; overflow: hidden; border: 3px solid rgba(58, 40, 22, .85); box-shadow: 0 6px 0 rgba(58, 40, 22, .25); aspect-ratio: 1; background: var(--paper-2); }
.np-pic img { width: 100%; height: 100%; display: block; }
.np-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.np-info h1 { margin: 0; font: 700 46px/1.05 var(--f-d); letter-spacing: -.005em; } .np-info h1 span { color: var(--ink-3); font-size: 32px; }
.np-sub { margin: 6px 0 14px; font-weight: 700; color: var(--ink-2); font-size: 15px; }
.np-rank { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 16px; background: linear-gradient(180deg, #f4edff, #e3d5ff); border: 2px solid #b79cf0; margin-bottom: 14px; }
.np-rank img { width: 42px; height: 42px; } .np-rank b { display: block; font: 700 21px/1.1 var(--f-d); color: #4f2f91; } .np-rank span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.np-traits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.np-traits > div { padding: 8px 11px; border-radius: 12px; background: #fff; border: 2px solid var(--line); display: grid; gap: 1px; min-width: 0; }
.np-traits span { font: 800 11px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.np-traits b { font: 700 17px/1.15 var(--f-d); } .np-traits small { font-size: 12px; font-weight: 800; color: #6a43b5; }
.np-act { padding: 14px 16px; border-radius: 16px; background: var(--paper-2); border: 2px dashed var(--line); }
.nm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.np-act .btn img { width: 28px; height: 28px; }
/* My NFTs */
.nmine { display: grid; grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.nm-main { display: contents; }
.nrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.nm-main > .box:last-child .nrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nrow > .empty-note { grid-column: 1 / -1; }
.nm-pet { position: relative; }
.nm-pet .btn { position: absolute; right: 7px; bottom: 9px; height: 30px; padding: 0 13px; font-size: 14.5px; }
.nm-pet .nc-b small { visibility: hidden; } .nm-pet:has(.btn) .nc-b b { padding-right: 64px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.checks .ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font: 700 14px/1 var(--f-d); color: #fff; background: #fff; }
.checks li.ok .ck { background: #5cbf38; border-color: #3f9724; }
.checks li small { display: block; color: var(--ink-3); font-size: 12px; }
.checks li a { font-weight: 800; font-size: 13px; }
/* the pet page's Petopian box */
.pnft-b { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; }
.pnft-pic img { width: 104px; height: 104px; border-radius: 14px; border: 2px solid var(--line); display: block; }
.pnft-t { display: grid; gap: 5px; min-width: 0; }
.pnft-rank { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .pnft-rank img { width: 24px; height: 24px; } .pnft-rank b { font: 700 18px/1 var(--f-d); color: #4f2f91; }
.pnft-tr { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pnft .note { font-size: 13px; }
.pnft .btn { height: 38px; padding: 0 16px; font-size: 16px; } .pnft .btn img { width: 24px; height: 24px; }
/* the inventory's "make it a Treasure" window */
.tw { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
.tw img { width: 170px; height: 170px; border-radius: 16px; border: 2px solid var(--line); display: block; }
.tw h4 { margin: 0 0 6px; font: 700 24px/1.1 var(--f-d); }
.tw + .row .btn img { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- the bigger world: the world map, the lands */
.worldpage, .landpage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.worldpage .mapwrap, .landpage .mapwrap { width: min(100%, calc((100vh - 300px) * 1.5059)); margin: 0; justify-self: center; }
.mapwrap .map { user-select: none; -webkit-user-drag: none; }
.region img { width: 26px; height: 26px; margin: -4px 4px -6px -6px; vertical-align: middle; }
.region.lit { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px 3px 6px; font-size: 16.5px; }
.region.lit img { margin: 0; width: 26px; height: 26px; }
.region.hot { background: var(--sun-l) !important; transform: translate(-50%, -50%) scale(1.12) !important; z-index: 3; }
.rb { font-style: normal; } .rb:empty { display: none; }
.region .rb { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #51cf66; color: #fff; font: 700 12px/1.3 var(--f-d); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.wl-list .rb { margin-left: 8px; padding: 0 7px; border-radius: 999px; background: #e5f8d8; color: #2f7417; font: 700 11.5px/1.5 var(--f-d); vertical-align: 2px; }
.wl-tip { position: absolute; z-index: 5; max-width: 300px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .96); border: 2.5px solid rgba(58, 40, 22, .85); box-shadow: 0 4px 0 rgba(58, 40, 22, .25); font-size: 13.5px; font-weight: 700; color: var(--ink-2); pointer-events: none; opacity: 0; transition: opacity .12s; }
.wl-tip.on { opacity: 1; } .wl-tip b { display: block; font: 700 18px/1.15 var(--f-d); color: var(--ink); }
.wl-list, .ld-places { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.wl-list a, .ld-places a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.wl-list a:hover, .wl-list a.hot, .ld-places a:hover { background: var(--sun-xl); }
.wl-list img, .ld-places img { width: 40px; height: 40px; object-fit: contain; }
.wl-list b, .ld-places b { display: block; font: 700 16px/1.15 var(--f-d); }
.wl-list small, .ld-places small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-places em { font: 800 11.5px/1.2 var(--f-t); font-style: normal; color: var(--ink-3); text-align: right; white-space: nowrap; }
.ld-places em.ok { color: var(--leaf-d); }
.ld-places img { border-radius: 10px; background: var(--paper-2); }
.ld-side { display: grid; gap: 14px; }
.spot .lbl .rdy { display: inline-block; width: 11px; height: 11px; margin: 0 -4px 1px 7px; border-radius: 50%; background: #c9c2b8; border: 2px solid rgba(58, 40, 22, .5); vertical-align: middle; }
.spot .lbl .rdy:empty:not(.ok):not([title]) { display: none; }
.spot .lbl .rdy.ok { background: #51cf66; box-shadow: 0 0 0 3px rgba(81, 207, 102, .35); animation: rdy 1.6s ease-in-out infinite; }
@keyframes rdy { 50% { box-shadow: 0 0 0 6px rgba(81, 207, 102, 0); } }
.feed { list-style: none; margin: 0; padding: 6px 8px 8px; display: grid; gap: 4px; }
.feed li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.feed li img { width: 30px; height: 30px; object-fit: contain; }
.feed li b { color: var(--ink); } .feed li small { color: var(--ink-3); }
.feed li time { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; }
.feed li.empty { grid-template-columns: 1fr; color: var(--ink-3); text-align: center; padding: 10px; }
/* ---------------------------------------------------------------- a place: host and how-to, the place, prizes and recent luck */
.placepage { display: grid; grid-template-columns: 240px minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.pl-host { display: grid; gap: 10px; }
.pl-host .pl-keeper { width: 180px; height: 180px; object-fit: contain; margin: -12px auto -14px; filter: drop-shadow(0 4px 0 rgba(58, 40, 22, .16)); }
.pl-host .bubble { font-size: 15.5px; padding: 10px 13px; line-height: 1.3; }
.pl-host .bubble::before { left: 50%; top: -16px; transform: translateX(-50%); border: 11px solid transparent; border-bottom: 13px solid rgba(58, 40, 22, .75); }
.bubble.pop { animation: pop .35s var(--ease); }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.howto ol { list-style: none; margin: 0; padding: 8px 10px 10px; display: grid; gap: 7px; }
.howto li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.howto li > b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sun-l); border: 2px solid var(--sun-d); font: 700 13px/1 var(--f-d); color: #5a3a00; }
.howto.big li { font-size: 14px; } .howto.big li span b { color: var(--ink); }
.pl-stage .pl-body { padding: 10px; }
.pl-status { color: var(--ink-3) !important; font-weight: 800 !important; }
.pl-status.ok { color: var(--leaf-d) !important; }
.pl-side { display: grid; gap: 14px; }
.prizes { list-style: none; margin: 0; padding: 6px 10px 8px; display: grid; gap: 4px; }
.prizes li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 3px 0; border-bottom: 1.5px dashed var(--line-2); }
.prizes li:last-child { border-bottom: 0; }
.prizes em { font-style: normal; font: 800 11px/1.2 var(--f-t); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); white-space: nowrap; }
.prizes em.o-rare, .prizes em.o-sometimes { color: #1f6fb8; } .prizes em.o-very-rare, .prizes em.o-legendary, .prizes em.o-jackpot { color: #b07a00; }
.paylist, .wheellist { list-style: none; margin: 0; padding: 6px 10px 8px; display: grid; gap: 3px; }
.paylist li { display: flex; justify-content: space-between; align-items: center; font: 700 16px/1 var(--f-d); }
.paylist .trip { display: inline-flex; gap: 2px; } .paylist .trip img { width: 30px; height: 30px; object-fit: contain; }
.wheellist { grid-template-columns: 1fr 1fr; } .wheellist li { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.wheellist i { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid rgba(58, 40, 22, .6); flex: none; }
.pl-actions { display: grid; justify-items: center; gap: 8px; padding: 10px 4px 2px; }
.pl-actions .btn-lg { min-width: 260px; }
.pl-res { min-height: 54px; display: grid; place-items: center; font-weight: 700; color: var(--ink-3); font-size: 14px; text-align: center; width: 100%; }
.rescard { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 16px; background: #fff; border: 2.5px solid var(--line); box-shadow: 0 3px 0 var(--line-2); font: 600 16px/1.25 var(--f-d); color: var(--ink); animation: pop .4s var(--ease); max-width: 100%; }
.rescard.win { background: linear-gradient(180deg, #fffbe6, #fff3c4); border-color: var(--sun-d); }
.rescard img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.scene { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; border: 2.5px solid rgba(58, 40, 22, .8); background: #5a7 center / cover no-repeat; }
.scene .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255, 250, 200, .95), rgba(255, 220, 120, .3) 30%, rgba(255, 220, 120, 0) 62%); opacity: 0; }
.scene .glow.on { animation: glow 1.4s ease-out; }
.springs-scene .glow { background: radial-gradient(circle at 55% 62%, rgba(180, 255, 250, .95), rgba(120, 220, 255, .3) 32%, rgba(120, 220, 255, 0) 64%); }
@keyframes glow { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
/* Old Grizzle */
.cave-scene .grizzle { position: absolute; left: 50%; bottom: 2%; width: 74%; transform: translateX(-50%); transition: transform .2s; }
.cave-scene.tense .grizzle { animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.02, 1.04); } }
.cave-scene.shake { animation: shake .5s linear 3; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 0); } 80% { transform: translate(4px, 2px); } }
.cave-scene .frost { position: absolute; inset: 0; background: radial-gradient(circle at 75% 35%, rgba(220, 245, 255, .95), rgba(160, 220, 255, .5) 40%, rgba(160, 220, 255, 0) 75%); opacity: 0; pointer-events: none; }
.cave-scene .frost.on { animation: frost 2.2s ease-out; }
@keyframes frost { 10% { opacity: 1; } 100% { opacity: 0; } }
.zzz { position: absolute; left: 28%; top: 22%; font: 700 30px/1 var(--f-d); color: #fff; text-shadow: var(--outline); }
.zzz b { display: inline-block; animation: zz 2.4s ease-in-out infinite; opacity: 0; } .zzz b:nth-child(2) { animation-delay: .8s; font-size: 36px; } .zzz b:nth-child(3) { animation-delay: 1.6s; font-size: 44px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, -30px); } }
/* the Fossil Dig */
.dig-grid { position: absolute; left: 21%; top: 31%; width: 59%; height: 49%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4px; }
.dig-grid button { border-radius: 8px; border: 2px dashed rgba(90, 58, 20, .45); background: rgba(255, 240, 200, .12); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .15s; }
.dig-grid button:hover { background: rgba(255, 240, 200, .45); border-style: solid; }
.dig-grid.off button { cursor: default; } .dig-grid.off button:not(.dug):hover { background: rgba(255, 240, 200, .12); border-style: dashed; }
.dig-grid button.digging { animation: shake .3s linear 3; background: rgba(140, 90, 40, .35); }
.dig-grid button.dug { background: rgba(120, 80, 40, .45); border-style: solid; }
.dig-grid button img { width: 72%; height: 72%; object-fit: contain; animation: pop .4s var(--ease); }
/* the Giant Stew: a crop of Stonejaw's map round the pot */
.stew-scene { background-size: 470% auto !important; background-position: 85.5% 47% !important; }
.steam { position: absolute; left: 45%; top: 8%; width: 20%; height: 40%; pointer-events: none; }
.steam i { position: absolute; bottom: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(4px); animation: steam 2.6s ease-in infinite; }
.steam i:nth-child(2) { left: 30%; animation-delay: .6s; } .steam i:nth-child(3) { left: 60%; animation-delay: 1.2s; } .steam i:nth-child(4) { left: 15%; animation-delay: 1.8s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-160px) scale(1.6); } }
/* Old Mag's errand */
.tower-scene { display: grid; place-items: center; }
.scroll { width: min(86%, 470px); padding: 14px 18px 16px; border-radius: 10px; background: linear-gradient(180deg, #fff6dc, #f3e2b4); border: 2.5px solid rgba(110, 70, 20, .7); box-shadow: 0 8px 0 rgba(60, 30, 10, .35); display: grid; gap: 8px; }
.scroll h4 { margin: 0; font: 700 21px/1.1 var(--f-d); color: #5a3a00; } .scroll p { margin: 0; font-weight: 700; color: var(--ink-2); font-size: 14px; }
.wants { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wants li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .55); }
.wants li.have { background: #e5f8d8; } .wants img { width: 46px; height: 46px; }
.wants b { display: block; font: 700 16px/1.15 var(--f-d); } .wants small { font-weight: 700; font-size: 12.5px; color: var(--ink-3); }
.q-foot { display: flex; justify-content: space-between; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.q-foot b { color: #5a3a00; }
/* Spooky Scratchers */
.scratchcard { width: min(100%, 420px); margin: 0 auto; padding: 14px 16px 12px; border-radius: 20px; background: radial-gradient(circle at 50% 0%, #6b4bb5, #2a1850 70%); border: 3px solid #1a0d33; box-shadow: 0 6px 0 rgba(30, 10, 60, .4), inset 0 0 0 3px rgba(255, 210, 120, .5); display: grid; gap: 10px; }
.sc-title { text-align: center; font: 700 26px/1 var(--f-d); color: #ffd34d; text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 180, 60, .6); letter-spacing: .04em; }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-grid button { aspect-ratio: 1; border-radius: 14px; border: 2px solid rgba(0, 0, 0, .4); background: #fff8e6; padding: 0; cursor: pointer; position: relative; overflow: hidden; display: grid; place-items: center; }
.sc-grid button i { position: absolute; inset: 0; background: linear-gradient(135deg, #d9dde3 0%, #f4f6f8 35%, #b7bec7 60%, #e9ecef 100%); }
.sc-grid button i::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 34px/1 var(--f-d); color: rgba(80, 90, 100, .5); }
.sc-grid button:hover:not(:disabled) i { filter: brightness(1.08); }
.sc-grid button.scratching i { animation: scr .4s steps(4) forwards; }
@keyframes scr { to { opacity: 0; transform: scale(1.3) rotate(8deg); } }
.sc-grid button.open { background: #fff8e6; } .sc-grid button img { width: 76%; height: 76%; object-fit: contain; animation: pop .35s var(--ease); }
.sc-grid button:disabled { cursor: default; }
.scratchcard.none .sc-grid { opacity: .45; } .scratchcard.done .sc-grid button:not(.open) i { opacity: .55; }
.sc-foot { text-align: center; font: 700 15px/1.2 var(--f-d); color: #fff; min-height: 18px; }
/* the Fishing Pier */
.pier-scene .angler { position: absolute; left: 9%; top: 18%; width: 22%; transform: scaleX(-1); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); }
.pier-scene .line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pier-scene .line path { stroke: rgba(255, 255, 255, .9); stroke-width: .35; fill: none; }
.bobber { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: linear-gradient(180deg, #ff4d4d 50%, #fff 50%); border: 2px solid #3a2816; transition: left .7s cubic-bezier(.3, .6, .4, 1), top .7s cubic-bezier(.3, .6, .4, 1); }
.bobber.home { opacity: 0; } .bobber.out { animation: bob 1.2s ease-in-out infinite; }
.bobber.dip { animation: dip .35s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } } @keyframes dip { 50% { transform: translateY(12px) scale(.85); } }
.bite { position: absolute; left: 59%; top: 44%; font: 700 54px/1 var(--f-d); color: #ffd34d; text-shadow: var(--outline); opacity: 0; transform: scale(.4); transition: all .15s; }
.bite.on { opacity: 1; transform: scale(1); }
.catch { position: absolute; left: 50%; top: 40%; width: 90px; height: 90px; margin-left: -45px; pointer-events: none; opacity: 0; }
.catch.up { animation: catchup 1.6s var(--ease) forwards; } .catch img { width: 100%; height: 100%; object-fit: contain; }
@keyframes catchup { 0% { opacity: 0; transform: translateY(80px) scale(.5) rotate(-20deg); } 30% { opacity: 1; transform: translateY(-40px) scale(1.2) rotate(10deg); } 80% { opacity: 1; transform: translateY(-20px) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(.9); } }
.btn.flash { animation: flash .4s linear infinite; } @keyframes flash { 50% { filter: brightness(1.3); transform: scale(1.04); } }
.fishinfo { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
/* Treasure Cove */
.t-grid { position: absolute; inset: 4% 3%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); }
.t-grid button { border: 1px dashed rgba(110, 70, 20, .2); background: none; cursor: crosshair; padding: 0; position: relative; }
.t-grid button:hover { background: rgba(255, 60, 40, .18); }
.t-grid button:hover::after, .t-grid button.dug::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px/1 var(--f-d); color: #d9480f; text-shadow: 0 1px 0 #fff; }
.t-grid button.gold { background: radial-gradient(circle, rgba(255, 215, 0, .8), rgba(255, 215, 0, 0) 70%); }
.t-grid button.gold::after { content: ''; background: url('/art/items/minichest.webp') center / 90% no-repeat; }
.t-grid.off button { cursor: default; } .t-grid.off button:hover:not(.dug)::after { content: none; } .t-grid.off button:hover { background: none; }
/* the Tiki Tombola */
.tombola-scene { background: radial-gradient(circle at 50% 30%, #fff1b8, #ffb36b 60%, #ff7a8a); display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; }
.tombola-scene .drum { width: 92%; } .tombola-scene .drum.spin { animation: drum .25s linear infinite; }
@keyframes drum { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.ticket { width: 62%; aspect-ratio: 3 / 4; border-radius: 14px; background: #fffaf0; border: 3px dashed #d9480f; display: grid; place-items: center; transform: rotateY(90deg); transition: transform .45s var(--ease); box-shadow: 0 6px 0 rgba(120, 40, 0, .3); }
.ticket.show { transform: none; } .ticket.win { background: linear-gradient(180deg, #fffbe6, #ffe08a); border-style: solid; }
.ticket b { font: 700 28px/1 var(--f-d); color: #d9480f; } .ticket img { width: 80%; height: 70%; object-fit: contain; }
/* the Sunken Wreck */
.wreck-scene .chest { position: absolute; top: 55%; height: 27%; border: 0; background: none; cursor: pointer; border-radius: 16px; padding: 0; display: grid; place-items: center; }
.wreck-scene .chest.c0 { left: 8%; width: 25%; } .wreck-scene .chest.c1 { left: 38%; width: 25%; } .wreck-scene .chest.c2 { left: 67%; width: 25%; }
.wreck-scene .chest:hover { background: radial-gradient(circle, rgba(255, 250, 200, .5), rgba(255, 250, 200, 0) 70%); }
.wreck-scene.off .chest { cursor: default; } .wreck-scene.off .chest:hover { background: none; }
.wreck-scene .chest.pick { animation: shake .3s linear 2; } .wreck-scene .chest.open { background: radial-gradient(circle, rgba(255, 230, 120, .85), rgba(255, 230, 120, 0) 70%); }
.wreck-scene .chest img { width: 60%; height: 80%; object-fit: contain; animation: catchup2 .6s var(--ease); }
@keyframes catchup2 { 0% { transform: translateY(30px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.eel { position: absolute; width: 22%; height: 24%; top: 40%; pointer-events: none; background: url('/art/items/crab.webp') center / contain no-repeat; opacity: 0; }
.eel.on { animation: catchup2 .4s var(--ease) forwards; } .eel.c0 { left: 9%; } .eel.c1 { left: 39%; } .eel.c2 { left: 68%; }
/* Scarab Slots */
.slotmachine { width: min(100%, 470px); margin: 0 auto; padding: 12px 16px 14px; border-radius: 26px; background: linear-gradient(180deg, #7a3fd0, #3d1a7a); border: 3px solid #2a1050; box-shadow: 0 6px 0 rgba(40, 10, 80, .45), inset 0 0 0 4px #ffcf3f; display: grid; gap: 10px; }
.sm-top { display: flex; justify-content: center; align-items: center; gap: 10px; font: 700 26px/1 var(--f-d); color: #ffd34d; text-shadow: 0 3px 0 #2a1050; letter-spacing: .04em; } .sm-top img { width: 34px; height: 34px; }
.sm-reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; border-radius: 16px; background: #1d0b40; }
.sm-reel { height: 240px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #d8d2c8, #fffaf0 30%, #fffaf0 70%, #d8d2c8); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .35), inset 0 -6px 10px rgba(0, 0, 0, .35); }
.sm-cell { height: 80px; display: grid; place-items: center; } .sm-cell img { width: 64px; height: 64px; object-fit: contain; }
.sm-line { position: absolute; left: 4px; right: 4px; top: 50%; height: 84px; margin-top: -42px; border-radius: 12px; border: 3px solid rgba(255, 207, 63, .9); pointer-events: none; box-shadow: 0 0 14px rgba(255, 207, 63, .5); }
.sm-win { text-align: center; font: 700 22px/1 var(--f-d); color: #fff; min-height: 24px; } .sm-win.big { color: #ffd34d; animation: flash .5s linear 4; }
/* the Coconut Academy */
.academy { display: grid; gap: 10px; }
.ac-pet { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; border: 2px solid var(--line); background: #fff; }
.ac-pet > img { width: 96px; height: 96px; }
.ac-b { display: grid; gap: 6px; min-width: 0; }
.ac-h { display: flex; gap: 8px; align-items: center; } .ac-h b { font: 700 19px/1 var(--f-d); } .ac-h small { margin-left: auto; font-weight: 700; color: var(--ink-3); font-size: 12px; }
.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ac-stats span { padding: 3px 6px; border-radius: 8px; background: var(--paper-2); text-align: center; } .ac-stats small { display: block; font-size: 10.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; } .ac-stats b { font: 700 18px/1.1 var(--f-d); }
.ac-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ac-btns .btn { height: 32px; padding: 0 12px; font-size: 14.5px; } .ac-btns small { font-weight: 700; color: var(--ink-3); font-size: 12px; }
.ac-cur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 700; font-size: 13.5px; }
.ac-cur .bar { height: 12px; border-radius: 99px; background: var(--paper-2); border: 1.5px solid var(--line); overflow: hidden; } .ac-cur .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8ce99a, #40c057); }
.ac-cur .btn { height: 32px; padding: 0 12px; font-size: 14px; min-width: 120px; }
/* the Star Observatory */
.obs-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.scope { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 10, .9) 46%); opacity: 0; transition: opacity .6s; }
.scope.on { opacity: 1; }
/* the Rainbow Studio */
.studio { display: grid; gap: 6px; }
.st-pets, .st-brushes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.st-pet, .st-brush { display: grid; justify-items: center; gap: 1px; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 700; min-width: 92px; }
.st-pet img { width: 64px; height: 64px; } .st-brush img { width: 52px; height: 52px; }
.st-pet span, .st-brush span { font: 700 14px/1.1 var(--f-d); } .st-pet small { font-size: 11.5px; color: var(--ink-3); }
.st-pet.on, .st-brush.on { border-color: #e64980; box-shadow: 0 0 0 3px rgba(230, 73, 128, .25); background: #fff0f6; }
.st-preview { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; justify-items: center; }
.st-pic { display: grid; justify-items: center; gap: 2px; } .st-pic img { width: 156px; height: 156px; } .st-pic span { font: 700 17px/1 var(--f-d); }
.st-pic.after img { filter: drop-shadow(0 0 14px rgba(255, 200, 255, .9)); }
.st-arrow { font: 700 34px/1 var(--f-d); color: #e64980; }
.studio.painting .st-pic.after { animation: rainbow .35s linear infinite; } .studio.painting .st-pic:first-child img { animation: shake .3s linear infinite; }
@keyframes rainbow { 0% { filter: hue-rotate(0deg) brightness(1.2); } 100% { filter: hue-rotate(360deg) brightness(1.2); } }
/* the Wheel of Wonders */
.wheelwrap { position: relative; width: min(100%, calc(100vh - 575px), 420px); aspect-ratio: 1; margin: 4px auto 0; }
.wheelwrap canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 0 rgba(58, 40, 22, .25)); }
.w-pointer { position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -18px; border: 18px solid transparent; border-top: 36px solid #e03131; filter: drop-shadow(0 2px 0 #3a2816); }
.w-hub { position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 4px solid #3a2816; display: grid; place-items: center; } .w-hub img { width: 80%; }
/* ---------------------------------------------------------------- the Brassport Exchange */
.xpage { display: grid; grid-template-columns: 410px minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.x-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.x-tbl th { font: 800 11px/1 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 6px 6px; }
.x-tbl td { padding: 3px 6px; border-top: 1.5px solid var(--line-2); vertical-align: middle; } .x-tbl td img { width: 26px; height: 26px; }
.x-tbl tr[data-s] { cursor: pointer; } .x-tbl tr[data-s]:hover { background: var(--sun-xl); } .x-tbl tr.on { background: #fff3c4; }
.x-tbl td b { font: 700 15px/1 var(--f-d); } .x-tbl td small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.x-tbl .r, .x-htbl .r { text-align: right; }
.x-chg { font: 800 12.5px/1 var(--f-t); white-space: nowrap; } .x-chg.up, .up { color: #2f9e44; } .x-chg.dn, .dn { color: #d9480f; }
.spark { display: block; }
.x-main h3 .more { color: var(--ink) !important; font: 700 17px/1 var(--f-d) !important; } .x-main h3 img { width: 28px; height: 28px; }
.x-chart { position: relative; margin: 8px 10px 0; height: 190px; border-radius: 12px; background: #fffdf6; border: 1.5px solid var(--line-2); overflow: hidden; }
.x-chart svg { width: 100%; height: 100%; display: block; }
.x-axis span { position: absolute; right: 6px; font-size: 11px; font-weight: 800; color: var(--ink-3); } .x-axis span:first-child { top: 4px; } .x-axis span:nth-child(2) { bottom: 4px; } .x-axis .x-span { left: 8px; right: auto; bottom: 4px; }
.x-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.x-stats div { padding: 5px 8px; border-right: 1.5px solid var(--line-2); } .x-stats div:last-child { border-right: 0; }
.x-stats span { display: block; font: 800 10.5px/1.2 var(--f-t); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; } .x-stats b { font: 700 18px/1.1 var(--f-d); }
.x-trade { margin: 0 10px; padding: 10px; border-radius: 14px; background: var(--paper-2); border: 2px solid var(--line); display: grid; gap: 8px; }
.x-tabs { display: flex; gap: 6px; } .x-tabs button { flex: 1; height: 32px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font: 700 15px/1 var(--f-d); cursor: pointer; }
.x-tabs button.on { background: var(--sun-l); border-color: var(--sun-d); }
.x-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .x-form .input { height: 40px; } .x-form .btn { height: 40px; }
.x-prev { display: grid; gap: 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-height: 54px; }
.x-news { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.x-news time { font-size: 11px; color: var(--ink-3); font-weight: 700; } .x-news li.empty { color: var(--ink-3); }
.x-side { display: grid; gap: 14px; }
.x-held { padding: 6px 8px; } .x-htbl { width: 100%; border-collapse: collapse; font-size: 13px; } .x-htbl th { font: 800 10.5px/1 var(--f-t); text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 4px; }
.x-htbl td { padding: 4px; border-top: 1.5px solid var(--line-2); font-weight: 700; } .x-htbl tr[data-s2] { cursor: pointer; } .x-htbl tr.tot td { font: 700 15px/1 var(--f-d); }
.x-how h3 img { width: 34px; height: 34px; margin: -6px 0; }
/* ---------------------------------------------------------------- the starter guide */
.guidepage { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.guide { list-style: none; margin: 0; padding: 8px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.guide li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--paper-2); border: 1.5px solid var(--line-2); }
.guide li .ck { grid-row: span 2; } .guide li .gt { grid-row: span 2; }
.guide li .gp { grid-column: 3; } .guide li .btn, .guide li .tag { grid-column: 3; }
.guide .ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font: 700 14px/1 var(--f-d); color: #fff; background: #fff; }
.guide li.done .ck, .guide li.claimed .ck { background: #5cbf38; border-color: #3f9724; }
.guide .gt b { display: block; font: 700 16px/1.15 var(--f-d); } .guide .gt small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.guide li.claimed .gt b { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.guide .gp { font: 700 15px/1 var(--f-d); color: var(--leaf-d); text-align: right; }
.guide .btn { height: 28px; padding: 0 12px; font-size: 14px; justify-self: end; } .guide .tag { justify-self: end; }
.guide .gt small { display: block; line-height: 1.25; }
.gd-prog { display: grid; gap: 4px; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .85); border: 2px solid rgba(58, 40, 22, .5); font: 700 16px/1 var(--f-d); min-width: 170px; text-align: center; }
.gd-prog .bar, .gc-bar { height: 10px; border-radius: 99px; background: #fff; border: 1.5px solid var(--line); overflow: hidden; } .gd-prog .bar i, .gc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #ff922b); }
.daily { list-style: none; margin: 0; padding: 6px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.daily a { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 3px 6px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.daily a:hover { background: var(--sun-xl); } .daily img { width: 30px; height: 30px; grid-row: span 2; } .daily b { font: 700 13.5px/1.1 var(--f-d); } .daily small { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }

/* ---------------------------------------------------------------- one screen, no page scroll (desktop) */
@media (min-width: 901px) {
  html, body { height: 100%; overflow: hidden; }
  .page { height: calc(100vh - 20px); margin: 10px auto; display: flex; flex-direction: column; }
  .top, .foot { flex: none; }
  .body { flex: 1 1 auto; min-height: 0; }
  .side { min-height: 0; overflow: hidden; }
  .main { min-height: 0; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .main::-webkit-scrollbar { width: 8px; } .main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
  body.is-out .main { overflow: hidden; }
  .mapwrap { width: min(100%, calc((100vh - 356px) * 1.5059)); }
  .gp-play.wide .stage { width: min(100%, calc((100vh - 262px - 198px) * var(--ar))); margin: 0 auto; }
  .gp-play.tall { grid-template-columns: minmax(180px, 1fr) minmax(0, calc((100vh - 262px) * var(--ar))); }
}
@media (min-width: 901px) and (max-height: 900px) { .gp-pays { display: none; } }
@media (min-width: 901px) and (max-height: 820px) {
  .gp-play.wide .gp-under { display: none; }
  .gp-play.wide .stage { width: min(100%, calc((100vh - 262px) * var(--ar))); }
}
@media (min-width: 901px) and (max-height: 860px) { .side .sb-online { display: none; } .sb-pic img { width: 140px; height: 140px; } }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  :root { --side: 100%; }
  body { font-size: 15px; }
  .page { width: 100vw; margin: 0; }
  .top { height: auto; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 8px 12px 6px; gap: 6px; border-radius: 0; border-left: 0; border-right: 0; }
  .logo-pet { width: 52px; height: 52px; }
  .logo-word { font-size: 34px; }
  .logo-star { width: 15px; height: 15px; }
  .mainnav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; gap: 0; }
  .mainnav a { width: auto; flex: 1; font-size: 12px; padding: 4px 2px; }
  .mainnav a img { width: 34px; height: 34px; }
  .topright { min-width: 0; }
  .who-hi { display: none; }
  .body { grid-template-columns: minmax(0, 1fr); border: 0; }
  .side { order: 2; border-right: 0; border-top: 3px solid var(--sun-d); display: grid; grid-template-columns: 1fr 1fr; }
  .side .petbox { grid-column: 1 / -1; display: grid; grid-template-columns: 130px minmax(0, 1fr); }
  .side .petbox .ribbon { grid-column: 1 / -1; }
  .sb-pic img { width: 120px; height: 120px; }
  .sb-links { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .side .ca-pill { grid-column: 1 / -1; }
  .main { padding: 12px 10px 18px; }
  .foot { grid-template-columns: 1fr; border-radius: 0; text-align: center; border-left: 0; border-right: 0; }
  .foot-links { justify-content: center; } .foot-c { text-align: center; }
  .banner { height: 92px; } .banner .b-pet { width: 104px; height: 104px; left: 4px; bottom: -6px; } .banner .b-pet.b-icon { width: 64px; height: 64px; left: 18px; bottom: 12px; }
  .banner h1 { left: 116px; top: 14px; font-size: 32px; } .banner p { left: 118px; top: 56px; font-size: 13px; max-width: calc(100% - 130px); } .banner .b-side { display: none; }
  .hero { height: auto; display: flex; flex-direction: column; background: #8fd3ff; padding-top: 250px; }
  .hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 250px; background: url('/art/scenes/welcome.webp') 46% 70% / auto 120% no-repeat; }
  .hero::after { background: radial-gradient(90% 55% at 20% 0%, rgba(18, 40, 90, .6) 0%, rgba(18, 40, 90, 0) 70%); }
  .hero-head { left: 14px; right: 14px; top: 12px; } .hero-head h1 { font-size: 34px; } .hero-head p { font-size: 15px; max-width: 300px; }
  .land-row { height: auto; }
  .hero-card { position: relative; left: auto; right: auto; top: auto; transform: none; width: auto; margin: 10px; z-index: 2; }
  .hero-pot { display: none; }
  .homegrid, .helppage, .help-lands { grid-template-columns: minmax(0, 1fr); } .help-tabs { grid-template-columns: 1fr 1fr; }
  .land-row, .grid2, .grid3, .formpage, .maker, .petpage, .counter, .gamepage, .gamecards, .gr-wrap, .gr-tiles, .nftpage, .nmine, .worldpage, .landpage, .placepage, .xpage, .guidepage { grid-template-columns: minmax(0, 1fr); }
  .worldpage .mapwrap, .landpage .mapwrap { width: 100%; } .pl-host .pl-keeper { width: 130px; height: 130px; } .wheelwrap { width: min(100%, 420px); } .guide li { grid-template-columns: 26px minmax(0, 1fr) 50px 80px; }
  .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nbar { flex-direction: column; align-items: stretch; } .nfil { flex-wrap: wrap; justify-content: flex-start; } .nfil input.input { width: 100%; }
  .np-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-info h1 { font-size: 34px; } .banner .b-side { display: none; } .tw { grid-template-columns: 1fr; justify-items: center; }
  .species { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp img { width: 110px; height: 110px; }
  .petcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .petcard img { width: 130px; height: 130px; }
  .maker-pic { max-width: 360px; margin: 0 auto; }
  .petstage img { width: 300px; height: 300px; }
  .gamecard { grid-template-columns: 1fr; } .gamecard .gc-art { min-height: 170px; }
  .gr-pot { grid-template-columns: 1fr 1fr; }
  .shop-head { grid-template-columns: 110px minmax(0, 1fr); } .shop-head .keeper { width: 110px; height: 110px; margin: 0; } .shop-head .restock { grid-column: 1 / -1; text-align: left; }
  .bubble { font-size: 15px; padding: 10px 12px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post { grid-template-columns: 90px minmax(0, 1fr); } .post .who-col img { width: 64px; height: 64px; }
  .threads td.w, .threads td.l, .threads th.w, .threads th.l { display: none; }
  .tc-name { font-size: 34px; } .tc-foot { grid-template-columns: 1fr; } .tc-foot p { font-size: 14px; }
  .counter .keeper { width: 140px; height: 140px; margin: 0 auto; }
  .acct { grid-template-columns: 1fr; } .acct > div { border-right: 0; border-bottom: 1.5px solid var(--line-2); }
}
@media (max-width: 900px) {
  .stats2 { grid-template-columns: minmax(0, 1fr); } .stats2 > .stattable:first-child { border-right: 0; }
  .spot .lbl { font-size: 11px; padding: 3px 7px 2px; bottom: -8px; border-width: 1.5px; }
  .mapwrap { width: 100%; }
  .gamehead { flex-wrap: wrap; gap: 6px; } .gamehead .gh-pay { display: none; } .gamehead .gh-name { font-size: 22px !important; }
  .gp-play { display: contents; } .gamepage .stage { order: 1; } .gamepage .panel { order: 2; } .gamepage .gp-play .gp-under { order: 3; }      /* phone: the game, then score and bank, then the rest */
  .gp-play .gp-under { grid-template-columns: minmax(0, 1fr); gap: 12px; } .gp-play.wide .gp-under .box { height: auto; }
  .tc-name { font-size: 28px; left: 14px; top: 10px; } .tc-foot { padding: 10px 12px; } .tc-foot p { display: none; } .diffs { margin-bottom: 6px; } .diffs button { height: 30px; padding: 0 10px; font-size: 14px; }
  .titlecard .btn-lg { height: 46px; font-size: 19px; padding: 0 22px; }
  .gr-pot span { font-size: 10.5px; } .gr-pot b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }