@import"https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400&family=Caveat:wght@500;700&family=Patrick+Hand&family=Quicksand:wght@500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--felt-hi: #2f7457;--felt: #1f5a41;--felt-lo: #153f2e;--felt-edge: #0f2f21;--felt-well: rgba(8, 36, 24, .55);--gold-bright: #f6dd90;--gold-line: #e0bb5a;--gold-mid: #c9a144;--gold-dark: #8a6420;--gold-shade: #5d451a;--gold-outline: #3d2c0c;--cream: #f4ead0;--cream-dim: #cfc3a2;--gold-text: #ecd189;--engrave: #3a2c0d;--ink: #3a2718;--ink-soft: #6b4d33;--paper: #fff4d2;--paper-hi: #fffaeb;--paper-lo: #f0d999;--paper-edge-deep: #a17328;--leaf: #5ba35a;--leaf-deep: #2f6630;--gold: #e6b257;--font-brush: "Caveat", "Segoe Script", cursive;--font-hand: "Patrick Hand", "Quicksand", ui-sans-serif, system-ui, sans-serif;--font-storybook: "Averia Serif Libre", "Patrick Hand", ui-serif, serif;--font-body: "Quicksand", ui-sans-serif, system-ui, sans-serif;--paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.48  0 0 0 0 0.33  0 0 0 0 0.14  0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");--paper-bg: var(--paper-noise), radial-gradient(140% 100% at 50% 0%, var(--paper-hi) 0%, var(--paper) 48%, var(--paper-lo) 100%);--felt-lattice: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><g stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'><path d='M0 13 L13 0 L26 13 L13 26 Z'/></g><circle cx='13' cy='13' r='0.9' fill='%23ffffff' fill-opacity='0.05'/></svg>");--felt-bg: var(--felt-lattice), radial-gradient(130% 110% at 50% 0%, var(--felt-hi) 0%, var(--felt) 55%, var(--felt-lo) 100%);--corner-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='%23c9a144' stroke-linecap='round'><path d='M3 29 C3 14 14 3 29 3' stroke-width='2.6'/><path d='M8 29 C8 17 17 8 29 8' stroke='%23f6dd90' stroke-width='1.6'/><circle cx='29' cy='3' r='2.2' fill='%23f6dd90' stroke='none'/><circle cx='3' cy='29' r='2.2' fill='%23f6dd90' stroke='none'/><path d='M10 12 q3 -5 8 -4' stroke='%23f6dd90' stroke-width='1.4'/></g></svg>");--corner-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g transform='translate(32 0) scale(-1 1)' fill='none' stroke='%23c9a144' stroke-linecap='round'><path d='M3 29 C3 14 14 3 29 3' stroke-width='2.6'/><path d='M8 29 C8 17 17 8 29 8' stroke='%23f6dd90' stroke-width='1.6'/><circle cx='29' cy='3' r='2.2' fill='%23f6dd90' stroke='none'/><circle cx='3' cy='29' r='2.2' fill='%23f6dd90' stroke='none'/><path d='M10 12 q3 -5 8 -4' stroke='%23f6dd90' stroke-width='1.4'/></g></svg>");--corner-bl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g transform='translate(0 32) scale(1 -1)' fill='none' stroke='%23c9a144' stroke-linecap='round'><path d='M3 29 C3 14 14 3 29 3' stroke-width='2.6'/><path d='M8 29 C8 17 17 8 29 8' stroke='%23f6dd90' stroke-width='1.6'/><circle cx='29' cy='3' r='2.2' fill='%23f6dd90' stroke='none'/><circle cx='3' cy='29' r='2.2' fill='%23f6dd90' stroke='none'/><path d='M10 12 q3 -5 8 -4' stroke='%23f6dd90' stroke-width='1.4'/></g></svg>");--corner-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g transform='translate(32 32) scale(-1 -1)' fill='none' stroke='%23c9a144' stroke-linecap='round'><path d='M3 29 C3 14 14 3 29 3' stroke-width='2.6'/><path d='M8 29 C8 17 17 8 29 8' stroke='%23f6dd90' stroke-width='1.6'/><circle cx='29' cy='3' r='2.2' fill='%23f6dd90' stroke='none'/><circle cx='3' cy='29' r='2.2' fill='%23f6dd90' stroke='none'/><path d='M10 12 q3 -5 8 -4' stroke='%23f6dd90' stroke-width='1.4'/></g></svg>");--gold-plate: radial-gradient(120% 60% at 50% 0%, rgba(255, 250, 226, .55), transparent 55%), linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-line) 45%, var(--gold-mid) 58%, var(--gold-dark) 100%);--tilt-l: -.55deg;--tilt-r: .4deg}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:var(--font-body);background:#cfe8f7;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}canvas{touch-action:none;display:block}input,textarea{touch-action:auto;-webkit-user-select:text;user-select:text}.brush{font-family:var(--font-brush);font-weight:700;letter-spacing:1px;line-height:.92}.flourish{display:block;margin:-2px auto 8px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) sepia(1) saturate(2.2) hue-rotate(8deg) brightness(1.25)}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--cream)}.hud .panel{position:absolute;background:var(--felt-bg);background-size:26px 26px,100% 100%;border:2px solid var(--gold-outline);border-radius:18px;padding:14px 20px 16px;pointer-events:auto;color:var(--cream);box-shadow:0 0 0 1px #f6dd9059,inset 0 0 0 2px var(--gold-line),inset 0 0 0 3px #3d2c0cd9,inset 0 0 0 4px #f6dd902e,inset 0 1px #ffffff24,inset 0 -10px 24px #061a1173,0 12px 26px #08120a80,0 2px 4px #08120a4d}.hud .panel:before{content:"";position:absolute;top:7px;left:16px;right:16px;height:6px;border-radius:100%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);pointer-events:none}.hud .flourish{margin:-4px 0 4px}.hud .top-left{top:18px;left:18px;min-width:220px;transform:rotate(var(--tilt-l));transform-origin:top left}.hud .bottom-center{bottom:22px;left:50%;transform:translate(-50%) rotate(var(--tilt-r));font-size:13px;font-weight:600;color:var(--cream-dim);text-align:center;border-radius:999px;padding:10px 24px;max-width:92vw}.hud h1.brush{font-size:38px;margin:0;background:linear-gradient(180deg,var(--gold-bright) 10%,var(--gold-line) 45%,var(--gold-dark) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(240,212,136,.35))}.hud .row{font-size:14px;font-weight:600;line-height:1.65;display:flex;justify-content:space-between;gap:18px;color:var(--cream);font-family:var(--font-storybook)}.hud .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;box-shadow:0 0 8px currentColor}.dot.on{background:#7ed07a;color:#7ed07a}.dot.off{background:var(--gold);color:var(--gold)}.join-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow:auto;background:radial-gradient(120px 120px at 76% 16%,rgba(255,246,214,.95),rgba(255,232,160,.55) 45%,transparent 70%),radial-gradient(420px 320px at 76% 18%,rgba(255,220,140,.7),transparent 65%),conic-gradient(from 210deg at 76% 16%,transparent 0deg,rgba(255,244,200,.28) 6deg,transparent 14deg,transparent 26deg,rgba(255,244,200,.22) 33deg,transparent 42deg,transparent 56deg,rgba(255,244,200,.26) 64deg,transparent 74deg,transparent 360deg),radial-gradient(900px 480px at 50% 0%,rgba(255,248,220,.8),transparent 70%),radial-gradient(60% 26% at 18% 62%,rgba(126,160,196,.55),transparent 70%),radial-gradient(52% 22% at 78% 64%,rgba(140,172,204,.5),transparent 70%),radial-gradient(80% 20% at 45% 66%,rgba(165,192,216,.45),transparent 72%),radial-gradient(90% 34% at 22% 92%,rgba(126,178,106,.9),transparent 72%),radial-gradient(95% 36% at 82% 96%,rgba(108,165,96,.92),transparent 70%),radial-gradient(1100px 600px at 50% 130%,rgba(120,175,110,.95),transparent 72%),radial-gradient(820px 320px at 50% 100%,rgba(90,145,90,.6),transparent 65%),linear-gradient(180deg,#8fcdec,#b9e2ea 40%,#e2eec4)}.join-overlay:before,.join-overlay:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.94),transparent 70%);filter:blur(3px);animation:drift 16s ease-in-out infinite;pointer-events:none}.join-overlay:before{width:340px;height:170px;top:14%;left:12%;box-shadow:240px 90px 60px -30px #ffffff80,-120px 140px 70px -40px #fff6}.join-overlay:after{width:280px;height:140px;top:24%;right:10%;animation-delay:-7s}@keyframes drift{0%,to{transform:translate(-18px)}50%{transform:translate(22px)}}.join-card{position:relative;background:var(--corner-tl) no-repeat left 12px top 12px,var(--corner-tr) no-repeat right 12px top 12px,var(--corner-bl) no-repeat left 12px bottom 12px,var(--corner-br) no-repeat right 12px bottom 12px,var(--felt-bg);background-size:30px 30px,30px 30px,30px 30px,30px 30px,26px 26px,100% 100%;border:3px solid var(--gold-outline);border-radius:22px;padding:30px 38px 34px;text-align:center;color:var(--cream);width:420px;margin:24px;box-shadow:0 0 0 2px #f6dd9066,inset 0 0 0 3px var(--gold-line),inset 0 0 0 5px #3d2c0ccc,inset 0 0 0 6px #f6dd902e,inset 0 1px #ffffff29,inset 0 -14px 30px #061a1180,0 26px 60px #08120a80,0 4px #08120a33;animation:pageSway 9s ease-in-out infinite}@keyframes pageSway{0%,to{transform:rotate(-.4deg)}50%{transform:rotate(.5deg)}}@media (prefers-reduced-motion: reduce){.join-card{animation:none}.join-overlay:before,.join-overlay:after{animation:none}}.join-card:before{content:"";position:absolute;top:12px;left:48px;right:48px;height:10px;border-radius:100%;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);pointer-events:none}.join-card h1.brush{font-size:68px;margin-bottom:0;background:linear-gradient(180deg,var(--gold-bright) 8%,var(--gold-line) 42%,var(--gold-dark) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 3px 3px rgba(6,26,17,.55)) drop-shadow(0 0 18px rgba(240,212,136,.4))}.join-card .flourish{margin:-6px auto 12px}.join-card p{color:var(--cream-dim);font-family:var(--font-storybook);font-style:italic;font-size:15px;font-weight:400;margin:0 0 20px;letter-spacing:.2px}.linkish{background:none;border:none;padding:0;font:inherit;color:var(--gold-text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.linkish:hover{filter:brightness(1.15)}.join-card input{width:100%;padding:13px 18px;border-radius:12px;border:2px solid var(--gold-outline);background:var(--paper-bg);background-size:180px 180px,100% 100%;color:var(--ink);font-family:var(--font-storybook);font-size:16px;font-weight:700;outline:none;transition:box-shadow .15s ease;box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 2px 5px #3c280a40,0 1px #f6dd9040}.join-card input:focus{box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 2px 5px #3c280a33,0 0 0 4px #f0d4884d}.join-card input::placeholder{color:#a08b5f;font-weight:400;font-style:italic}.customizer{margin:18px 0 22px;display:flex;flex-direction:column;gap:12px}.outfit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.outfit-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;background:var(--felt-well);border:2px solid var(--gold-dark);border-radius:12px;cursor:pointer;color:var(--cream);box-shadow:inset 0 2px 5px #04140c80,0 1px #f6dd9026;transition:transform .1s ease,filter .1s ease}.outfit-card:hover{filter:brightness(1.15);transform:translateY(-1px)}.outfit-card.sel{background:var(--gold-plate);border-color:var(--gold-outline);color:var(--engrave);text-shadow:0 1px 0 rgba(255,250,226,.55);box-shadow:inset 0 0 0 1px #fffae280,inset 0 1px #ffffff59,inset 0 -2px #3d2c0c4d,0 3px 0 var(--gold-shade),0 5px 10px #08120a59}.outfit-icon{font-size:20px;line-height:1}.outfit-label{font-family:var(--font-storybook);font-weight:700;font-size:11.5px;letter-spacing:.4px}.outfit-note{font-family:var(--font-storybook);font-style:italic;font-size:13px;color:var(--cream-dim);text-align:center;padding:4px 8px 0}.swatch-row{display:flex;align-items:center;gap:12px}.swatch-label{width:54px;text-align:right;font-family:var(--font-storybook);font-size:15px;color:var(--gold-text);flex-shrink:0}.swatches{display:flex;gap:9px;flex-wrap:wrap}.swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(246,221,144,.75);box-shadow:0 1px #ffffff59 inset,0 0 0 1px #3d2c0cb3,0 2px 5px #061a1180;cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .12s ease}.swatch:hover{transform:scale(1.12)}.swatch.sel{border-color:var(--gold-bright);transform:scale(1.22);box-shadow:0 0 0 2px var(--gold-line),0 0 0 4px var(--gold-outline),0 4px 10px #0006,0 0 12px #f0d488b3}.join-card button.enter{width:100%;padding:14px;border-radius:14px;border:2px solid var(--gold-outline);background:var(--gold-plate);color:var(--engrave);font-family:var(--font-storybook);font-size:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,226,.55);box-shadow:inset 0 0 0 1px #fffae280,inset 0 2px #ffffff59,inset 0 -4px #3d2c0c4d,0 6px 0 var(--gold-shade),0 14px 22px #08120a73;transition:transform .08s ease,box-shadow .08s ease,filter .08s ease}.join-card button.enter:hover{transform:translateY(-1px);filter:brightness(1.05)}.join-card button.enter:active{transform:translateY(5px);box-shadow:inset 0 0 0 1px #fffae280,inset 0 2px #ffffff59,inset 0 -4px #3d2c0c57,0 1px 0 var(--gold-shade),0 4px 10px #08120a66}.speech{position:relative;background:var(--paper-bg);background-size:160px 160px,100% 100%;color:var(--ink);border:2px solid var(--gold-outline);border-radius:14px;padding:7px 14px;font-family:var(--font-storybook);font-weight:400;font-size:17px;line-height:1.25;max-width:240px;width:max-content;text-align:center;box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 0 0 2px #fffadc80,0 8px 18px #141e1466;pointer-events:none;-webkit-user-select:none;user-select:none}.speech:before{content:"";position:absolute;left:50%;bottom:-10px;transform:translate(-50%);border:9px solid transparent;border-top-color:var(--gold-outline)}.speech:after{content:"";position:absolute;left:50%;bottom:-7px;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--paper)}.talk-btn{background:var(--gold-plate);color:var(--engrave);border:2px solid var(--gold-outline);border-radius:999px;padding:7px 16px;font-family:var(--font-storybook);font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,226,.5);box-shadow:inset 0 0 0 1px #fffae280,inset 0 1px #fff6,inset 0 -2px #3d2c0c4d,0 4px 0 var(--gold-shade),0 8px 14px #08120a66;-webkit-user-select:none;user-select:none}.talk-btn:hover{filter:brightness(1.06)}.talk-btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 1px #fffae280,inset 0 -2px #3d2c0c57,0 1px 0 var(--gold-shade),0 3px 7px #08120a59}.chat-bar{position:fixed;bottom:64px;left:50%;transform:translate(-50%);z-index:20}.chat-bar input{width:460px;max-width:86vw;padding:13px 20px;border-radius:14px;border:2px solid var(--gold-outline);background:var(--paper-bg);background-size:160px 160px,100% 100%;color:var(--ink);font-family:var(--font-storybook);font-weight:400;font-size:16px;outline:none;box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 0 0 2px #fffadc80,0 14px 28px #141e1466}.chat-bar input:focus{box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 0 0 2px #fffadc80,0 0 0 4px #f0d48859,0 14px 28px #141e1466}.chat-bar input::placeholder{color:#a08b5f;font-style:italic}.chat-mode{position:absolute;top:-28px;left:10px;font-family:var(--font-storybook);font-size:14px;font-weight:700;color:#fff;background:linear-gradient(180deg,#9d70c5,#6c468e);padding:4px 14px;border-radius:999px;border:2px solid var(--gold-outline);text-shadow:0 1px 0 rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px var(--gold-line),0 4px 10px #3c1e5066}.chat-log{position:fixed;bottom:108px;left:18px;width:340px;max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:var(--paper-bg);background-size:180px 180px,100% 100%;border:2px solid var(--gold-outline);border-radius:14px;pointer-events:auto;font-family:var(--font-storybook);font-size:15px;line-height:1.4;color:var(--ink);scrollbar-width:thin;scrollbar-color:var(--paper-edge-deep) transparent;box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 0 0 2px #fffadc80,0 14px 28px #141e1466;transform:rotate(var(--tilt-l));transform-origin:bottom left}.chat-log::-webkit-scrollbar{width:6px}.chat-log::-webkit-scrollbar-thumb{background:var(--paper-edge-deep);border-radius:3px}.log-line b{font-family:var(--font-storybook);font-weight:700;font-size:15px;color:var(--leaf-deep);letter-spacing:.3px}.log-line.say{color:var(--ink)}.log-line.whisper{color:#6c468e;font-style:italic}.log-line.whisper b{color:#5a3580}.log-line.emote{color:var(--ink-soft);font-style:italic}.emote-bar{position:fixed;bottom:18px;right:18px;display:flex;gap:8px;z-index:15}.emote-btn{width:48px;height:48px;border-radius:12px;border:2px solid var(--gold-outline);background:var(--felt-bg);background-size:26px 26px,100% 100%;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px #f6dd904d,inset 0 0 0 1px var(--gold-line),inset 0 1px #ffffff26,inset 0 -3px #061a1166,0 6px 12px #08120a66;transition:transform .08s ease,box-shadow .08s ease}.emote-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #f6dd9073,inset 0 0 0 1px var(--gold-line),inset 0 1px #ffffff26,inset 0 -3px #061a1166,0 8px 14px #08120a73,0 0 12px #f0d48866}.emote-btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 -2px #061a1170,0 2px 5px #08120a66}.touch-stick{position:fixed;z-index:5;pointer-events:none}.stick-ring{position:absolute;border-radius:50%;left:0;top:0;transform:translate(-50%,-50%);background:radial-gradient(circle,#fffbdc52,#fffbdc0d);border:2px solid rgba(246,221,144,.8);box-shadow:0 4px 14px #00000038,inset 0 1px #ffffff8c;transition:border-color .12s ease,box-shadow .12s ease}.stick-ring.sprint{border-color:var(--gold);box-shadow:0 0 22px #e6b257d9,inset 0 1px #ffffff8c}.stick-knob{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffaee,#efd9a8 70%,#cba35a);border:2px solid rgba(80,50,20,.5);box-shadow:inset 0 1px #fff9,0 4px 10px #00000052;pointer-events:none}.touch-hint{position:fixed;bottom:18px;left:18px;z-index:16;background:var(--felt-bg);background-size:26px 26px,100% 100%;border:2px solid var(--gold-outline);border-radius:999px;padding:9px 18px;font-family:var(--font-storybook);font-weight:700;font-size:13px;color:var(--cream);box-shadow:0 0 0 1px #f6dd904d,inset 0 0 0 1px var(--gold-line),inset 0 -2px #061a1166,0 6px 14px #08120a66;cursor:pointer}.touch-hint:active{transform:translateY(1px)}.journal-pill{position:fixed;top:18px;right:18px;z-index:18;background:var(--felt-bg);background-size:26px 26px,100% 100%;border:2px solid var(--gold-outline);border-radius:999px;padding:9px 18px;font-family:var(--font-storybook);font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--gold-text);text-shadow:0 1px 0 rgba(0,0,0,.4);cursor:pointer;box-shadow:0 0 0 1px #f6dd9059,inset 0 0 0 1px var(--gold-line),inset 0 1px #ffffff26,inset 0 -2px #061a1166,0 6px 14px #08120a73;transform:rotate(var(--tilt-r));transition:transform .12s ease,filter .12s ease}.journal-pill:hover{transform:rotate(var(--tilt-r)) translateY(-1px);filter:brightness(1.1)}.journal-pill:active{transform:rotate(var(--tilt-r)) translateY(1px)}.sound-pill{position:fixed;top:18px;right:118px;z-index:18;width:40px;height:40px;border-radius:50%;border:2px solid var(--gold-outline);background:var(--felt-bg);background-size:26px 26px,100% 100%;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px #f6dd9059,inset 0 0 0 1px var(--gold-line),inset 0 -2px #061a1166,0 6px 14px #08120a73}.sound-pill:hover{filter:brightness(1.12)}.sound-pill:active{transform:translateY(1px)}.journal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:radial-gradient(600px 400px at 50% 30%,rgba(10,30,18,.25),transparent 70%),#08100a8c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .22s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.journal{position:relative;width:min(760px,96vw);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;background:var(--corner-tl) no-repeat left 10px top 10px,var(--corner-tr) no-repeat right 10px top 10px,var(--corner-bl) no-repeat left 10px bottom 10px,var(--corner-br) no-repeat right 10px bottom 10px,var(--felt-bg);background-size:28px 28px,28px 28px,28px 28px,28px 28px,26px 26px,100% 100%;border:3px solid var(--gold-outline);border-radius:20px;color:var(--cream);box-shadow:0 0 0 2px #f6dd9073,0 0 0 5px var(--felt-edge),inset 0 0 0 3px var(--gold-line),inset 0 0 0 5px #3d2c0ccc,inset 0 0 0 6px #f6dd9029,inset 0 1px #ffffff24,inset 0 -16px 34px #061a1180,0 32px 80px #000602a6;animation:bookOpen .28s cubic-bezier(.2,.7,.3,1.2)}@keyframes bookOpen{0%{transform:scale(.92) rotate(-.6deg);opacity:0}to{transform:scale(1) rotate(-.2deg);opacity:1}}.journal:before{content:"";position:absolute;top:12px;left:44px;right:44px;height:10px;border-radius:100%;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);pointer-events:none}.journal-close{position:absolute;top:12px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;border:2px solid var(--gold-outline);background:var(--gold-plate);color:var(--engrave);font-family:var(--font-storybook);font-size:22px;font-weight:700;line-height:1;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,226,.5);box-shadow:inset 0 0 0 1px #fffae280,inset 0 -2px #3d2c0c4d,0 4px 10px #08120a73}.journal-close:hover{filter:brightness(1.06)}.journal-close:active{transform:translateY(1px)}.journal-head{padding:20px 24px 8px;text-align:center}.journal-head h2.brush{position:relative;z-index:0;display:inline-block;font-family:var(--font-storybook);font-size:24px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;line-height:1;color:var(--engrave);background:var(--gold-plate);padding:11px 42px 12px;border:2px solid var(--gold-outline);border-radius:999px;margin-bottom:4px;text-shadow:0 1px 0 rgba(255,250,226,.55);box-shadow:inset 0 0 0 1px #fffae280,inset 0 2px #ffffff59,inset 0 -3px #3d2c0c4d,0 4px 10px #08120a66}.journal-head h2.brush:before,.journal-head h2.brush:after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold-mid) 60%,var(--gold-dark));border:2px solid var(--gold-outline);box-shadow:0 2px 5px #08120a66}.journal-head h2.brush:before{left:12px}.journal-head h2.brush:after{right:12px}.journal-tabs{display:flex;gap:8px;padding:8px 24px 14px;border-bottom:2px solid rgba(224,187,90,.35);flex-wrap:wrap;justify-content:center}.journal-tab{display:inline-flex;align-items:center;gap:6px;background:var(--felt-well);border:2px solid var(--gold-dark);border-radius:999px;padding:7px 16px;font-family:var(--font-storybook);font-weight:700;font-size:14px;letter-spacing:.4px;color:var(--cream);cursor:pointer;box-shadow:inset 0 2px 5px #04140c80,0 1px #f6dd902e}.journal-tab .tab-icon{font-size:16px}.journal-tab:hover{filter:brightness(1.12)}.journal-tab.sel{background:var(--gold-plate);color:var(--engrave);border-color:var(--gold-outline);text-shadow:0 1px 0 rgba(255,250,226,.55);box-shadow:inset 0 0 0 1px #fffae280,inset 0 1px #ffffff59,inset 0 -2px #3d2c0c4d,0 3px 0 var(--gold-shade),0 6px 12px #08120a59}.journal-page{padding:18px 32px 24px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--gold-mid) transparent;font-family:var(--font-storybook);font-size:15px;line-height:1.55;color:var(--cream)}.journal-page::-webkit-scrollbar{width:7px}.journal-page::-webkit-scrollbar-thumb{background:var(--gold-mid);border-radius:3px}.traveler-list{display:flex;flex-direction:column;gap:10px}.traveler{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--felt-well);border:1px solid rgba(224,187,90,.4);border-radius:14px;box-shadow:inset 0 2px 6px #04140c80,0 1px #f6dd901f}.traveler.self{border-color:var(--gold-line);box-shadow:inset 0 2px 6px #04140c73,inset 0 0 22px #f0d4881a,0 1px #f6dd902e}.traveler .t-body{flex:1;min-width:0}.traveler .t-name{font-family:var(--font-storybook);font-weight:700;font-size:18px;color:var(--gold-text);line-height:1.1;text-shadow:0 1px 0 rgba(0,0,0,.4)}.traveler .t-note{font-family:var(--font-storybook);font-style:italic;font-size:13px;color:var(--cream-dim);margin-top:2px}.traveler .t-whisper{background:var(--gold-plate);color:var(--engrave);border:2px solid var(--gold-outline);border-radius:999px;padding:8px 14px;font-family:var(--font-storybook);font-weight:700;font-size:12px;letter-spacing:.4px;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,226,.5);box-shadow:inset 0 0 0 1px #fffae280,inset 0 1px #ffffff59,0 4px 0 var(--gold-shade),0 6px 12px #08120a59}.traveler .t-whisper:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-shade)}.empty-note{font-family:var(--font-storybook);color:var(--cream-dim);text-align:center;padding:20px 8px;font-style:italic}.wardrobe{display:flex;flex-direction:column;align-items:center;gap:16px}.wardrobe-preview{background:radial-gradient(120% 90% at 50% 20%,rgba(240,212,136,.12),transparent 60%),var(--felt-well);border:2px solid var(--gold-dark);border-radius:18px;padding:14px;box-shadow:inset 0 2px 8px #04140c8c,inset 0 0 0 1px #e0bb5a40,0 1px #f6dd9026}.wardrobe-pickers{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}.wardrobe-actions{margin-top:4px;width:100%;max-width:280px}.wardrobe-actions button.enter{width:100%;padding:12px;border-radius:12px;border:2px solid var(--gold-outline);background:var(--gold-plate);color:var(--engrave);font-family:var(--font-storybook);font-size:16px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,226,.5);box-shadow:inset 0 0 0 1px #fffae280,inset 0 1px #ffffff59,inset 0 -3px #3d2c0c4d,0 5px 0 var(--gold-shade),0 10px 18px #08120a66}.wardrobe-actions button.enter:disabled{cursor:default}.guide-intro{font-style:italic;color:var(--cream-dim);margin-bottom:12px}.guide-rows{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0}.guide-rows li{display:grid;grid-template-columns:28px 1fr auto 1fr;gap:10px;align-items:baseline;padding:6px 10px;border-bottom:1px solid rgba(224,187,90,.28)}.g-icon{font-size:18px;text-align:center}.g-key{font-family:var(--font-storybook);font-weight:700;color:var(--cream)}.g-sep{color:var(--cream-dim)}.g-act{color:var(--gold-text);font-family:var(--font-storybook)}.guide-foot{margin-top:14px;color:var(--cream-dim);font-style:italic;text-align:center}.guide-foot em{font-family:var(--font-storybook);font-weight:700;font-size:15px;font-style:normal;color:var(--gold-text)}.portrait{display:block;filter:drop-shadow(0 4px 8px rgba(4,20,12,.5))}.species-hint{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin-top:8px}.species-hint li{display:flex;gap:12px;align-items:center;padding:10px 14px;background:var(--felt-well);border:1px solid rgba(224,187,90,.4);border-radius:14px;box-shadow:inset 0 2px 6px #04140c80,0 1px #f6dd901f}.species-hint .g-icon{font-size:28px}.species-hint .t-name{font-family:var(--font-storybook);font-weight:700;font-size:17px;color:var(--gold-text);line-height:1.1;text-shadow:0 1px 0 rgba(0,0,0,.4)}.species-hint .t-note{font-family:var(--font-storybook);font-style:italic;font-size:13px;color:var(--cream-dim);margin-top:2px}.bond-count{font-family:var(--font-storybook);font-size:13px;color:var(--engrave);background:var(--gold-plate);border:1px solid var(--gold-outline);padding:1px 9px;border-radius:999px;margin-left:6px;vertical-align:middle;text-shadow:0 1px 0 rgba(255,250,226,.5)}.fox-prompt[data-mode=hidden],.fox-prompt[data-mode=offer] .fox-progress,.fox-prompt[data-mode=progress] .fox-offer{display:none}.fox-offer{background:var(--gold-plate);color:var(--engrave);border:2px solid var(--gold-outline);border-radius:999px;padding:6px 14px;font-family:var(--font-storybook);font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer;text-shadow:0 1px 0 rgba(255,250,226,.5);box-shadow:inset 0 0 0 1px #fffae280,inset 0 1px #fff6,inset 0 -2px #3d2c0c4d,0 4px 0 var(--gold-shade),0 8px 14px #08120a66;-webkit-user-select:none;user-select:none}.fox-offer:active{transform:translateY(2px)}.fox-progress{position:relative;width:44px;height:44px}.fox-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(#f7c75e,#fffbdc40 0);box-shadow:0 0 14px #f7c75eb3,0 0 0 2px #fffbdc99 inset}.fox-ring-inner{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;background:#28180a99;display:flex;align-items:center;justify-content:center;color:#fffef4;font-family:var(--font-storybook);font-weight:700;font-size:14px;text-shadow:0 1px 0 rgba(0,0,0,.4)}@media (max-width: 720px),(max-height: 560px){.join-card{width:92vw;max-width:420px;padding:24px 22px 26px;margin:12px}.join-card h1.brush{font-size:50px}.swatch{width:30px;height:30px}.hud .top-left{top:10px;left:10px;min-width:0;padding:8px 12px;font-size:12px}.hud h1.brush{font-size:24px}.hud .row{font-size:12px;gap:10px}.hud .bottom-center{bottom:70px;font-size:11px;padding:6px 14px;max-width:92vw}.chat-log{width:62vw;max-height:28vh;bottom:70px;left:10px;font-size:14px}.chat-bar{bottom:18px}.chat-bar input{width:86vw;font-size:16px}.emote-btn{width:42px;height:42px;font-size:20px}.emote-bar{bottom:10px;right:10px;gap:6px}.journal-pill{top:10px;right:10px;font-size:14px;padding:7px 14px}.sound-pill{top:10px;right:96px;width:34px;height:34px;font-size:14px}.journal{width:calc(94vw - 8px);max-height:84vh}.journal-head{padding:14px 16px 4px}.journal-head h2.brush{font-size:17px;letter-spacing:1.8px;padding:9px 34px 10px}.journal-head h2.brush:before,.journal-head h2.brush:after{width:11px;height:11px}.journal-head h2.brush:before{left:10px}.journal-head h2.brush:after{right:10px}.journal-tabs{padding:4px 14px 10px;gap:6px}.journal-tab{font-size:12px;padding:6px 11px}.journal-page{padding:14px 18px 18px;font-size:14px}.traveler{padding:8px 10px;gap:10px}.traveler .t-name{font-size:16px}.guide-rows li{grid-template-columns:24px 1fr auto 1fr;gap:6px;font-size:13px}}