:root{--bg: #F2E4C9;--bg-grad-1:#F7ECD4;--bg-grad-2:#EAD2A4;--surface:#FFF7E6;--surface-2:#FAEED7;--line:#E5D3B3;--text:#2B2118;--text-soft:#6E5A4C;--brand:#B7572A;--brand-2:#A1421C;--brand-3:#E0A15C;--success:#2F9E67;--danger:#C2472F;--warning:#D2882A;--radius:14px;--radius-sm:10px;--shadow: 0 10px 30px rgba(161, 88, 45, .15);--shadow-sm: 0 6px 18px rgba(161, 88, 45, .12);--focus-ring: 0 0 0 3px rgba(224,161,92,.35);--topbar-h: 56px;--toolbar-h: 68px;--inset-bot: env(safe-area-inset-bottom, 0px);--inset-top: env(safe-area-inset-top, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}html{color-scheme:light}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Noto Sans;color:var(--text);background:radial-gradient(900px 500px at -10% -10%,var(--bg-grad-1),transparent 60%),radial-gradient(800px 500px at 120% 120%,var(--bg-grad-2),transparent 55%),var(--bg);overflow-x:hidden;overscroll-behavior-y:contain}:focus-visible{outline:none;box-shadow:var(--focus-ring)}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.row{display:flex;gap:10px;align-items:center}.col{display:grid;gap:10px}.hide-sm{display:none!important}.mono{font-variant-numeric:tabular-nums}.hr{height:1px;background:var(--line);margin:10px 0;border:none}.vr{width:1px;height:28px;background:var(--line);display:none}.mobile-topbar{position:sticky;top:0;z-index:30;height:calc(var(--topbar-h) + var(--inset-top));padding-top:var(--inset-top);background:linear-gradient(180deg,#ffffffeb,#ffffffb8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding-inline:12px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{width:82px;height:82px;border-radius:8px;box-shadow:var(--shadow-sm);flex:0 0 auto}.brand-title{color:var(--brand-2);font-weight:800;font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-btn{margin-left:auto;appearance:none;border:1px solid var(--line);background:var(--surface);padding:8px 10px;border-radius:10px;box-shadow:var(--shadow-sm);cursor:pointer}.shell{display:block;min-height:100%}.sidebar{position:fixed;inset:calc(var(--topbar-h) + var(--inset-top)) 0 auto 0;height:calc(100dvh - var(--topbar-h) - var(--inset-top));z-index:40;transform:translate(-100%);transition:transform .2s ease;padding:16px 16px calc(16px + var(--inset-bot));background:linear-gradient(180deg,#fffffff2,#fffc);border-right:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:12px;overflow:auto}body.sidebar-open .sidebar{transform:translate(0)}.sidebar-backdrop{position:fixed;inset:0;z-index:35;background:#00000059;opacity:0;pointer-events:none;transition:opacity .2s ease}body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}.main{display:grid;grid-template-rows:1fr auto;gap:12px;padding:12px;padding-bottom:calc(12px + var(--toolbar-h) + var(--inset-bot));min-height:calc(100dvh - var(--topbar-h) - var(--inset-top))}.canvas-wrap{min-height:0;height:calc(100dvh - var(--topbar-h) - var(--inset-top) - 12px - var(--toolbar-h) - var(--inset-bot));border-radius:var(--radius);border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:var(--shadow)}.canvas-wrap canvas{display:block;width:100%;height:100%;background:#fff;touch-action:none}.toolbar{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--inset-bot));z-index:25;padding:10px 12px;border-radius:14px;background:#fff9eff2;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm)}.card.soft{background:linear-gradient(135deg,#fff,#fff1d8)}.card.highlight{background:linear-gradient(135deg,#fff7e6,#ffe7c7)}.section-title{margin:6px 0;color:var(--brand-2);font-weight:800;font-size:16px}.mut{color:var(--text-soft)}.hint{font-size:12px;color:var(--text-soft)}.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}.list .item{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);display:flex;justify-content:space-between;align-items:center;gap:12px}.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#ffe3ce;color:var(--brand-2);border:1px solid var(--line)}.badge.green{background:#eaf7ef;color:#1e7a4e}.badge.red{background:#ffe0dc;color:#9f2b1d}.input,select,.input-number{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:#fff;font-size:16px;outline:none}.input.color{width:44px;height:38px;padding:4px;background:#fff8f0;border:1px solid var(--line);border-radius:10px}.input:focus,select:focus,.input-number:focus{border-color:var(--brand-3);box-shadow:var(--focus-ring)}.btn,.tool-btn,.icon-btn{appearance:none;border:none;border-radius:12px;padding:12px 14px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#ffebd7,#fce2c0);color:var(--brand-2);transition:transform .04s ease,filter .15s ease,box-shadow .15s ease;box-shadow:var(--shadow-sm);font-size:16px}.btn:hover,.tool-btn:hover,.icon-btn:hover{filter:brightness(1.03)}.btn:active,.tool-btn:active,.icon-btn:active{transform:translateY(1px)}.btn:focus-visible,.tool-btn:focus-visible,.icon-btn:focus-visible{box-shadow:var(--focus-ring),var(--shadow-sm)}.btn.primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn.danger{background:linear-gradient(135deg,#e85d42,#c2472f);color:#fff;border:none}.btn:disabled,.tool-btn:disabled,.icon-btn:disabled{opacity:.6;cursor:not-allowed;filter:none;transform:none}.tool-btn{border:1px solid var(--line);background:#fff8f0;color:var(--text);padding:10px 12px;font-size:16px;font-weight:800}.tool-btn.active{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;border-color:transparent}.icon-btn{border:1px solid var(--line);background:var(--surface);width:38px;height:38px;display:grid;place-items:center}.room-choices{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}.room-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .06s ease,box-shadow .15s ease,filter .15s ease}.room-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);filter:brightness(1.02)}.room-card:active{transform:translateY(0)}.room-card .square{width:100%;aspect-ratio:11 / 10;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:var(--surface-2) center/cover no-repeat;box-shadow:var(--shadow-sm)}.room-card .label{font-weight:700;color:var(--brand-2);font-size:14px;text-align:center}.square.public{background-image:url(/public_room.png)}.square.private{background-image:url(/private_room.png)}.block-disabled[aria-disabled=true]{opacity:.55;filter:grayscale(.1);pointer-events:none}.block-disabled[aria-disabled=true] .room-card{filter:grayscale(.4) opacity(.8);cursor:not-allowed;box-shadow:none}.section-header{display:flex;align-items:center;justify-content:space-between;margin:6px 0 8px}.top-status{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#fff,#fff1d8);box-shadow:var(--shadow-sm);margin-bottom:8px}.top-status strong{font-weight:800;color:var(--brand-2)}.modal{position:fixed;inset:0;background:#00000059;display:grid;place-items:center;z-index:50;padding:12px}.modal-card{width:min(92vw,560px);background:#fff;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px;gap:8px}.modal-header h3{margin:0;color:var(--brand-2)}.modal-x{border:none;background:transparent;cursor:pointer;font-size:18px}.modal-body{display:grid;gap:12px;padding:12px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px;border-top:1px solid var(--line)}.final-toast{position:fixed;right:16px;bottom:calc(16px + var(--toolbar-h) + var(--inset-bot));z-index:40;pointer-events:none}.final-toast .card{pointer-events:auto}.word-vote{text-align:center;padding:1rem}.word-options{display:flex;flex-direction:column;gap:.5rem}.word-options button{padding:.75rem 1rem;border:2px solid var(--line);border-radius:10px;cursor:pointer;font-size:1.05rem;background:var(--surface)}.word-options button.selected{border-color:var(--brand-3);background:#fff3e3}@media (min-width: 900px){.mobile-topbar,.sidebar-backdrop{display:none}body.sidebar-open .sidebar{transform:none}.shell{display:grid;grid-template-columns:360px 1fr;min-height:100%}.sidebar{position:sticky;inset:0;height:auto;transform:none;padding:16px 18px}.main{position:relative;padding:16px;padding-bottom:calc(16px + var(--toolbar-h));min-height:100%;grid-template-rows:1fr auto}.canvas-wrap{height:auto;min-height:0}.toolbar{position:sticky;bottom:16px;left:auto;right:auto;width:auto}.vr{display:block}.room-choices{grid-template-columns:1fr 1fr}}@media (max-width: 380px){.btn,.tool-btn,.icon-btn{padding:10px 12px;font-size:15px}.input{padding:10px 12px}:root{--toolbar-h: 64px}}