:root{--ink:#2a2420;--muted:#72675d;--paper:#fffaf0;--sand:#eadcc5;--moss:#315144;--moss-dark:#20382f;--gold:#c99d55;--shadow:0 24px 70px #2d221826}*{box-sizing:border-box}html{background:#efe5d4;min-height:100%}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 18% 10%,#fffc,#0000 32rem),linear-gradient(155deg,#f5eddf 0%,#e4d2b7 100%);margin:0;font-family:Arial,Noto Sans TC,sans-serif}a{color:inherit}h1,p{margin-top:0}h1{letter-spacing:-.045em;margin-bottom:.75rem;font-family:Georgia,Noto Serif TC,serif;font-size:clamp(2rem,10vw,4.8rem);line-height:.95}.page-shell,.room-shell{width:min(100% - 2rem,62rem);min-height:100svh;padding:max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));margin:0 auto}.page-shell{place-items:center;display:grid}.hero-card,.content-card{background:color-mix(in srgb, var(--paper) 92%, transparent);width:100%;box-shadow:var(--shadow);border:1px solid #4e3e3029;border-radius:1.75rem;padding:clamp(1.5rem,6vw,4.5rem);overflow:hidden}.eyebrow{color:var(--moss);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8rem;font-size:.72rem;font-weight:800}.lede{max-width:40rem;color:var(--muted);margin-bottom:1.5rem;font-size:clamp(1rem,3.5vw,1.2rem);line-height:1.7}.action-row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.primary-action,.secondary-action,.text-link{border-radius:999px;justify-content:center;align-items:center;min-height:2.8rem;font-size:.92rem;font-weight:750;text-decoration:none;display:inline-flex}.button-reset{font:inherit;cursor:pointer;border:0}.button-reset:disabled{cursor:wait;opacity:.55}.primary-action{color:#fffaf0;background:var(--moss);padding:.8rem 1.2rem;box-shadow:0 8px 24px #3151443d}.secondary-action{color:var(--moss-dark);border:1px solid #31514438;padding:.75rem 1.15rem}.text-link{color:var(--moss);padding:.65rem .4rem}.phase-note,.room-note{color:var(--muted);margin:1.5rem 0 0;font-family:monospace;font-size:.72rem}.profile-form{gap:.8rem;display:grid}.field-label,.interest-fieldset legend,.avatar-option-group legend{color:var(--moss-dark);font-size:.9rem;font-weight:800}.field-label span,.interest-fieldset legend span{color:var(--muted);font-size:.72rem;font-weight:500}.text-input{width:100%;min-height:3rem;color:var(--ink);font:inherit;background:#fffdf7;border:1px solid #31514447;border-radius:.8rem;padding:.8rem .95rem}.text-input:focus-visible,.interest-chip:focus-visible,.avatar-option:focus-visible,.profile-trigger:focus-visible,.sheet-close:focus-visible{outline-offset:2px;outline:3px solid #c99d5580}.text-area{resize:vertical;min-height:5rem}.profile-editor-sheet{max-height:min(90dvh,52rem);overflow-y:auto}.interest-fieldset,.avatar-option-group{border:0;min-width:0;margin:0;padding:0}.interest-grid,.avatar-option-grid,.profile-tags{flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0;display:flex}.interest-chip,.avatar-option{min-height:2.75rem;color:var(--moss-dark);font:inherit;cursor:pointer;background:#f5ead8;border:1px solid #3151442e;border-radius:999px;padding:.55rem .85rem;font-size:.86rem;font-weight:700}.interest-chip[aria-pressed=true],.avatar-option[aria-pressed=true]{color:#fffaf0;background:var(--moss);border-color:var(--moss);box-shadow:0 5px 14px #31514438}.form-error{color:#9d342c;margin:0;font-size:.86rem;font-weight:700}.avatar-editor{gap:1.5rem;display:grid}.avatar-stage{background:linear-gradient(#fffdf733,#fffdf7a6),repeating-linear-gradient(0deg,#d9c8aa 0 1px,#0000 1px 2rem),#efe2cb;border:1px solid #3151442e;border-radius:1rem;align-content:center;place-items:center;min-height:15rem;display:grid}.avatar-stage p{color:var(--moss-dark);margin:.6rem 0 0;font-weight:800}.avatar-preview-canvas{image-rendering:pixelated;display:block}.avatar-controls{gap:1rem;display:grid}.compact-card{max-width:42rem}.game-status-inline{color:var(--moss-dark);font-weight:800}.sync-notice{right:max(1rem, env(safe-area-inset-right));bottom:max(1rem, env(safe-area-inset-bottom));z-index:30;color:#fff5dc;background:#20382feb;border-radius:.7rem;margin:0;padding:.65rem .85rem;font-size:.78rem;font-weight:800;position:fixed}.sync-error{background:#89302af0}.room-shell{flex-direction:column;justify-content:center;min-height:100svh;display:flex}.room-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.room-header h1{margin:0;font-size:clamp(1.8rem,8vw,3.2rem)}.room-header .eyebrow{margin-bottom:.35rem}.room-actions,.profile-trigger{align-items:center;display:flex}.room-actions{gap:.7rem}.profile-trigger{min-height:2.7rem;color:var(--moss-dark);background:#fffaf0e0;border:1px solid #31514438;border-radius:999px;gap:.5rem;padding:.3rem .7rem .3rem .35rem;font-size:.82rem;font-weight:800}.profile-trigger .avatar-preview-canvas{width:1.25rem;height:2.5rem}.profile-sheet-backdrop{z-index:200;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#141f1b94;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.lifecycle-backdrop{z-index:80}.lifecycle-dialog{border:2px solid var(--forest,#1d4034);text-align:center;background:#fffaf0;border-radius:1.5rem;width:min(90vw,25rem);margin:auto;padding:2rem;box-shadow:0 1.5rem 4rem #182d2547}.lifecycle-dialog h2{margin:.35rem 0 .75rem;font-size:clamp(1.6rem,5vw,2.25rem)}.lifecycle-dialog p:not(.eyebrow){color:#5f5a52;margin:0 0 1.5rem}.lifecycle-dialog .primary-action{min-height:44px}.profile-sheet{width:min(100%,25rem);max-height:min(90svh,42rem);color:var(--ink);background:var(--paper);box-shadow:var(--shadow);border:1px solid #31514433;border-radius:1.35rem;justify-items:center;padding:1.5rem;display:grid;position:relative;overflow:auto}.profile-sheet h2{margin:0 0 .75rem;font-family:Georgia,Noto Serif TC,serif;font-size:1.8rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.auth-challenge{right:max(12px, env(safe-area-inset-right));bottom:max(12px, env(safe-area-inset-bottom));z-index:200;background:#fffaf0;border:1px solid #1f3e3233;border-radius:14px;gap:8px;max-width:min(320px,100vw - 24px);padding:10px;display:grid;position:fixed;box-shadow:0 10px 30px #1d19172e}.auth-challenge p{margin:0}.auth-challenge button{min-height:44px}.chat-backdrop{z-index:220;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#141f1b80;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.chat-sheet{width:min(100%,34rem);max-height:min(72svh,36rem);color:var(--ink);background:var(--paper);border:1px solid #31514433;border-radius:1.25rem 1.25rem 0 0;grid-template-rows:auto minmax(8rem,1fr) auto auto;padding:1rem;display:grid;box-shadow:0 -12px 40px #141f1b33}.chat-header,.chat-form,.chat-author{align-items:center;display:flex}.chat-header{justify-content:space-between;gap:1rem}.chat-header h2{margin:0;font-size:1.2rem}.chat-messages{align-content:start;gap:.65rem;padding:.75rem 0;display:grid;overflow-y:auto}.chat-message{background:#fffaf0c2;border:1px solid #3151441f;border-radius:.8rem;padding:.7rem}.chat-author{color:var(--moss-dark);background:0 0;gap:.45rem}.chat-author .avatar-preview-canvas{width:1rem;height:2rem}.chat-message p,.chat-empty,.chat-error{overflow-wrap:anywhere;white-space:pre-wrap;margin:.35rem 0 0}.chat-form{gap:.55rem}.chat-form input{min-width:0;min-height:2.8rem;color:var(--ink);font:inherit;background:#fffdf6;border:1px solid #31514440;border-radius:.75rem;flex:1;padding:.65rem .8rem}.chat-form .primary-action{border-radius:.75rem;min-width:5rem;min-height:2.8rem}.chat-error{color:#9a352d;font-size:.82rem}.profile-sheet .eyebrow{margin:.75rem 0 .35rem}.sheet-close{width:2.75rem;height:2.75rem;color:var(--moss-dark);background:#efe2cb;border-radius:999px;font-size:1.35rem;position:absolute;top:.7rem;right:.7rem}.profile-bio{color:var(--muted);text-align:center;margin-bottom:.8rem;line-height:1.65}.profile-tags{justify-content:center;margin:0 0 1.3rem}.profile-tags span{color:var(--moss-dark);background:#efe2cb;border-radius:999px;padding:.45rem .7rem;font-size:.78rem;font-weight:800}.profile-destination{border-top:1px solid #31514429;justify-items:center;gap:.65rem;width:100%;padding-top:1rem;display:grid}.profile-destination p{color:var(--muted);text-align:center;margin:0;font-size:.76rem;line-height:1.5}.profile-destination button{min-width:min(100%,15rem);min-height:2.8rem}@media (min-width:48rem){.avatar-editor{grid-template-columns:minmax(14rem,.8fr) minmax(20rem,1.2fr);align-items:start}}.game-frame{aspect-ratio:16/9;border:clamp(.45rem, 2vw, .8rem) solid var(--moss-dark);width:100%;box-shadow:var(--shadow);background:#171d1a;border-radius:1.15rem;position:relative;overflow:hidden}.game-host,.game-host canvas{width:100%;height:100%;display:block}.game-host canvas{image-rendering:pixelated}.overhead-portrait-layer{z-index:12;pointer-events:none;position:absolute;inset:0;overflow:hidden}.overhead-portrait-photo{box-sizing:border-box;object-fit:cover;object-position:center;image-rendering:auto;will-change:transform;background:#315c4f;border:2px solid #fff8e8;border-radius:50%;width:clamp(2.25rem,4.4vw,2.75rem);height:clamp(2.25rem,4.4vw,2.75rem);position:absolute;top:0;left:0;transform:translate(-999px,-999px);box-shadow:0 1px .25rem #17352d6b}.game-status{color:#fff5dc;place-items:center;margin:0;font-family:monospace;font-size:.8rem;display:grid;position:absolute;inset:0}.performance-qa-panel{top:max(.5rem, env(safe-area-inset-top));left:max(.5rem, env(safe-area-inset-left));z-index:25;color:#fff5dc;background:#121c18e6;border:1px solid #fff5dc59;border-radius:.65rem;width:11rem;padding:.65rem .75rem;font:.68rem/1.35 monospace;position:absolute}.performance-qa-panel dl,.performance-qa-panel div{margin:0}.performance-qa-panel div{justify-content:space-between;gap:.5rem;display:flex}.performance-qa-panel dd{margin:0;font-weight:800}@media (min-width:48rem){.page-shell,.room-shell{width:min(100% - 4rem,62rem)}}.orientation-gate{z-index:100;padding:max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));color:#fff5dc;text-align:center;background:var(--moss-dark);align-content:center;place-items:center;gap:.75rem;display:none;position:fixed;inset:0}.orientation-gate span{font-size:3rem}@media (orientation:portrait) and (pointer:coarse){.orientation-gate{display:grid}}@media (orientation:landscape) and (max-height:500px){body:has(.room-shell){overflow:hidden}.room-shell{width:100%;height:100dvh;min-height:0;padding:max(.375rem, env(safe-area-inset-top)) max(.375rem, env(safe-area-inset-right)) max(.375rem, env(safe-area-inset-bottom)) max(.375rem, env(safe-area-inset-left));place-items:center;display:grid;position:relative}.room-header{top:max(.5rem, env(safe-area-inset-top));right:max(.5rem, env(safe-area-inset-right));z-index:20;margin:0;position:fixed}.room-header>div{display:none}.room-actions{gap:.35rem}.profile-trigger{color:#fff5dc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#20382fe0;border-color:#fff5dc47;min-height:2.75rem;padding:.2rem .55rem .2rem .25rem}.profile-trigger .avatar-preview-canvas{width:1rem;height:2rem}.room-header .leave-link{color:#fff5dc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#20382fcc;min-height:2.75rem;padding:.45rem .7rem}.game-frame{width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:none;border-width:.375rem;border-radius:.75rem}.game-host{width:100%;height:100%}.game-host canvas{width:100%!important;height:100%!important}.room-note{display:none}}