@import url('/fonts.css');
:root{--paper:#f5f1e9;--card:#fffdf8;--ink:#25302e;--muted:#757b72;--line:#e0e1d5;--accent:#ce563d;--mint:#e1e9d8;--blue:#436277;--shadow:0 9px 30px #28352d0a;font:15px/1.5 'Inter',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #6581bd;outline-offset:4px}input,select,textarea{width:100%;background:var(--card);border:1px solid #cfd4c7;border-radius:12px;padding:12px 14px;color:var(--ink);outline:none}input:focus,textarea:focus,select:focus{border-color:#55694e;box-shadow:0 0 0 3px #55694e18}label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}h1,h2,h3,p{margin:0}h1,h2,.serif{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.04em}h1{font-size:clamp(32px,4vw,54px);line-height:1.1}h2{font-size:32px;line-height:1.15}h3{font-size:19px;line-height:1.3}small,.muted{color:var(--muted)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 18px;border:1px solid transparent;background:var(--ink);color:#fff;border-radius:11px;font-weight:600;font-size:14px;white-space:nowrap}.btn:hover{filter:brightness(1.1)}.btn.accent{background:var(--accent)}.btn.soft{background:var(--mint);color:var(--ink)}.btn.line{background:transparent;border-color:var(--line);color:var(--ink)}.btn.small{padding:7px 12px;font-size:12px}.btn.danger{color:#a93d32;background:#f4e1da}.icon-btn{border:1px solid var(--line);background:var(--card);width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center}.row{display:flex;align-items:center;gap:12px}.row.wrap{flex-wrap:wrap}.spread{justify-content:space-between}.stack>*+*{margin-top:16px}.avatar{width:42px;height:42px;border-radius:15px;object-fit:cover;flex:none}.avatar.big{width:68px;height:68px;border-radius:22px}.avatar.tiny{width:26px;height:26px;border-radius:9px}.chip{display:inline-block;font-size:11px;font-weight:600;padding:5px 9px;background:#e8eadf;border-radius:20px;color:#4c594c}.chip.orange{background:#f3dfd2;color:#9a4b32}.chip.blue{background:#e1e7eb;color:#426077}.chip.dark{background:#25302e;color:#f6f1e8}.panel{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.initial{padding:80px;text-align:center}.shell{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100vh}.rail{padding:32px 22px;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:40px}.brand{font-weight:800;letter-spacing:-.06em;font-size:28px;line-height:1}.brand b{color:var(--accent)}.brand small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-top:10px;color:var(--muted)}.rail nav{display:grid;gap:10px}.nav-link{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;background:none;border:0;width:100%;text-align:left;color:var(--muted)}.nav-link.active{background:#e7e9dc;color:var(--ink)}.rail-bottom{margin-top:auto;font-size:11px;color:var(--muted)}.main{padding:24px clamp(20px,4vw,64px) 50px;min-width:0;max-width:1700px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:35px;min-height:44px}.topbar .date{font-size:12px;color:var(--muted)}.profile{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);font-size:13px;font-weight:600}.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding:4px 0 32px}.hero h1{max-width:670px;margin:12px 0 18px}.hero p{font-size:14px;color:var(--muted);max-width:470px}.join-box{padding:23px;width:245px;transform:rotate(1deg);border:1px solid var(--line);border-radius:17px;background:#edeadd}.join-box .row{gap:6px;margin-top:12px}.join-box input{min-width:0;text-transform:uppercase;letter-spacing:.09em;padding:10px;font-size:13px}.join-box .btn{padding:10px 12px}.join-box h3{font-size:16px}.filters{display:flex;gap:8px;margin:8px 0 23px;overflow:auto}.filter{border:1px solid transparent;padding:8px 16px;border-radius:24px;background:none;font-size:12px;color:var(--muted);white-space:nowrap}.filter.active{background:var(--ink);color:#fff}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.game-tile{background:var(--card);border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.game-tile:hover{transform:translateY(-4px);box-shadow:0 14px 35px #25302e12}.game-cover{position:relative;aspect-ratio:1.66;background:#e9e6d8;overflow:hidden}.game-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.game-tile:hover .game-cover img{transform:scale(1.025)}.game-cover .chip{position:absolute;left:13px;top:13px;background:#fffdf1ed;color:#2d392d;font-size:10px}.game-info{padding:19px}.game-info p{font-size:12px;color:var(--muted);margin:8px 0 17px;min-height:36px}.game-info .row{font-size:11px;color:var(--muted)}.game-info .go{font-size:21px;color:var(--accent);border:0;background:#f2ece1;width:34px;height:34px;border-radius:50%}.notice{padding:14px 18px;background:#e7eadf;border:1px solid #d9dfce;border-radius:13px;font-size:13px;margin-bottom:24px}.footer{margin-top:35px;display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.footer button{background:none;border:0;color:inherit;padding:0;font-size:inherit;text-decoration:underline}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-art{padding:50px;background:#e8e8d9;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.login-art h1{font-size:clamp(40px,5vw,72px);max-width:550px;margin:40px 0}.login-collage{display:grid;grid-template-columns:1fr 1fr;gap:16px;transform:rotate(-5deg);max-width:650px;align-self:center}.login-collage img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:20px;box-shadow:0 15px 30px #21352e15}.login-form{padding:40px 50px;display:flex;align-items:center;justify-content:center}.login-form form{width:100%;max-width:430px}.login-form h2{font-size:42px;margin:12px 0}.login-form .lead{color:var(--muted);font-size:14px;margin-bottom:25px}.avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:10px 0}.avatar-option{padding:3px;background:transparent;border:2px solid transparent;border-radius:15px;aspect-ratio:1}.avatar-option img{width:100%;display:block;border-radius:11px}.avatar-option.selected{border-color:var(--accent);background:#f1ddd2}.login-form .btn[type=submit]{width:100%;margin-top:23px}.fine{font-size:11px;color:var(--muted);margin-top:18px}.form-error{font-size:13px;color:#b24032;min-height:20px;margin-top:12px}.room-heading{margin:0 0 24px}.room-heading h1{font-size:38px}.room-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:22px;align-items:start}.room-side{display:grid;gap:17px}.room-side .panel{padding:18px}.room-side h3{font-size:13px;margin-bottom:15px}.member{padding:8px 0;display:flex;align-items:center;gap:9px;font-size:13px;min-width:0}.member .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;flex:1}.member.offline{opacity:.6}.member.dead .avatar{filter:grayscale(1);opacity:.6}.member .status{font-size:10px;color:var(--muted)}.dot{width:7px;height:7px;display:inline-block;background:#8ba770;border-radius:50%;margin-right:4px}.dot.off{background:#adb0a6}.game-stage{min-width:0}.lobby-cover{width:100%;max-height:270px;object-fit:cover;border-radius:15px;margin-bottom:22px}.lobby-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.lobby-options label{margin-top:0}.room-code{letter-spacing:.16em;font-size:17px;font-weight:800;font-family:monospace}.big-state{text-align:center;padding:35px 20px}.big-state h2{margin:15px 0}.timer{font:600 13px/1.4 monospace;background:#e6e9de;border-radius:20px;padding:7px 12px;white-space:nowrap}.timer.urgent{color:#ba4735;background:#f7e0d7}.progress{height:6px;background:#e8e8df;border-radius:8px;overflow:hidden;margin:15px 0}.progress span{display:block;height:100%;background:var(--accent);transition:width .5s}.task-heading{margin-bottom:20px}.task-heading h2{font-size:30px;margin:9px 0}.task-heading p{font-size:13px;color:var(--muted)}.prompt{padding:25px 28px;background:#e9edde;border-radius:16px;font-size:24px;line-height:1.4;font-family:Georgia,serif;margin:20px 0;white-space:pre-wrap;overflow-wrap:anywhere}.draw-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}.swatch{width:27px;height:27px;border:3px solid var(--card);outline:1px solid #d7dbd1;border-radius:50%;background:var(--color);padding:0}.swatch.active{outline:2px solid var(--ink)}.draw-tools input[type=range]{padding:0;width:90px;accent-color:var(--accent)}.canvas-wrap{border:1px solid #d8dacf;border-radius:15px;background:white;overflow:hidden;aspect-ratio:4/3;touch-action:none}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.drawing-preview{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px}.album-controls{margin:18px 0}.album-title{font-size:14px}.album-pages{display:grid;gap:18px}.album-page{background:#f4f1e8;border:1px solid var(--line);border-radius:15px;padding:17px}.album-page .row{font-size:12px;margin-bottom:12px}.album-page p{font-size:22px;font-family:Georgia,serif}.play-table{background:#e3e8db;border-radius:20px;padding:25px 20px;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative}.opponents{display:flex;flex-wrap:wrap;justify-content:center;gap:13px}.opponent{text-align:center;padding:9px 13px;border:2px solid transparent;border-radius:15px;font-size:12px}.opponent.current{border-color:var(--accent);background:#faf8ee}.opponent img{width:38px;height:38px;border-radius:12px;display:block;margin:auto auto 5px}.opponent small{display:block}.table-piles{display:flex;align-items:center;gap:25px}.color-card{--card-color:#bf493c;background:var(--card-color);color:white;border:4px solid #fffaf1;width:93px;min-width:93px;height:136px;border-radius:13px;position:relative;box-shadow:0 4px 9px #25302e20;display:inline-flex;align-items:center;justify-content:center;flex:none}.color-card.red{--card-color:#c34c39}.color-card.blue{--card-color:#346da2}.color-card.green{--card-color:#4b835a}.color-card.yellow{--card-color:#dbac43;color:#342f21}.color-card.wild{--card-color:#303743;background:conic-gradient(from 35deg,#c34c39,#dbac43,#4b835a,#346da2,#c34c39)}.color-card:before{content:'';position:absolute;inset:14px 9px;border:2px solid #fff8;transform:rotate(16deg);border-radius:50%}.color-card .value{font-size:36px;font-weight:800;z-index:1;line-height:1}.color-card .corner{position:absolute;left:6px;top:6px;font-size:13px;font-weight:800}.color-card .symbol{position:absolute;bottom:6px;right:7px;font-size:14px}.color-card.back{background:#273e38;border:4px solid #fffaf1;font-size:26px;color:#e7eada}.color-card.back:before{border-radius:0;transform:rotate(45deg);inset:34px 18px}.hand{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:25px 0 17px}.hand .color-card{transition:transform .14s}.hand .color-card.playable{box-shadow:0 0 0 2px #7e9667,0 6px 12px #25302e18}.hand .color-card:hover:not(:disabled){transform:translateY(-8px)}.hand .color-card:disabled{opacity:.5}.hand-title{font-size:13px;margin-top:20px}.color-choice{display:flex;gap:12px;justify-content:center;margin:20px 0}.color-choice button{width:62px;height:62px;color:white;background:var(--color);border:3px solid #fff;border-radius:15px;font-size:26px}.role-panel{background:#28394b;color:#f5ecda;border-radius:18px;padding:23px;background-image:linear-gradient(90deg,#1d2f42ed,#1d2f42af),url('/assets/werewolf.webp');background-size:cover}.role-panel h2{font-size:32px;margin:8px 0}.role-panel p{font-size:13px;color:#d1d5d9}.role-panel .eyebrow{color:#e6b76a}.target-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px;margin:20px 0}.target{padding:15px 10px;border:1px solid var(--line);background:var(--card);border-radius:15px;text-align:center;color:var(--ink);font-size:13px}.target img{display:block;margin:0 auto 8px;width:48px;height:48px;border-radius:15px}.target.selected{border:2px solid var(--accent);background:#f9eade}.target:disabled{opacity:.35}.event-list{font-size:13px;padding:0;list-style:none}.event-list li{padding:11px 0;border-bottom:1px solid var(--line)}.vision{padding:11px 15px;background:#e5e8f0;border-radius:12px;font-size:13px;margin-top:10px}.chat-list{max-height:180px;overflow:auto;overflow-wrap:anywhere;font-size:12px;display:flex;flex-direction:column;gap:8px}.chat-list strong{font-size:11px}.chat-list p{color:#59635b}.chat-form{display:flex;gap:6px;margin-top:13px}.chat-form input{min-width:0;padding:8px 10px;font-size:12px}.chat-form button{padding:6px 9px}.question-card{padding:27px;background:#25312f;color:#fffdf1;border-radius:16px;box-shadow:var(--shadow);margin-bottom:20px}.question-card .eyebrow{color:#d9a88e}.question-card p{font-size:25px;line-height:1.4;font-weight:650;margin:17px 0 20px;overflow-wrap:anywhere}.question-card small{color:#b8c2b6}.answer-hand,.answer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}.answer-card{padding:18px 16px;border:1px solid #d8ddcf;background:#fffef7;border-radius:13px;text-align:left;min-height:165px;color:var(--ink);font-weight:650;line-height:1.4;display:flex;flex-direction:column;gap:15px;justify-content:space-between;position:relative;overflow-wrap:anywhere}.answer-card.selected{border:2px solid var(--accent);background:#fff2df;box-shadow:0 0 0 3px #ce563d15}.answer-card.joker{background:#eee4d3;border-style:dashed}.answer-card small{font-size:10px;font-weight:500}.answer-card textarea{font-size:13px;font-weight:400;padding:8px;margin-top:8px;resize:vertical;min-height:75px;background:#fff9ee}.answer-card .order{position:absolute;right:10px;top:9px;font-size:11px;background:var(--accent);color:white;padding:2px 7px;border-radius:50%}.answer-set{padding:15px;border:1px solid var(--line);border-radius:15px;background:#eaeade}.answer-set.winner{border:2px solid #7f9965;background:#e4ecd9}.answer-set .answer-card{min-height:135px;margin-bottom:10px}.vote-button{display:flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:20px;background:#f7f7ee;padding:6px 10px;color:#67715e;font-size:11px;white-space:nowrap}.vote-button.liked{background:#dfebd5;border-color:#9bb884;color:#39582d}.vote-button.accepted{background:#d9e8cf;color:#355328}.proposal-list{display:grid;gap:10px;margin:15px 0}.proposal-row{padding:13px;background:#f1f0e5;border-radius:12px;display:flex;gap:15px;align-items:center;justify-content:space-between;font-size:13px}.proposal-row p{overflow-wrap:anywhere;min-width:0}.proposal-row small{display:block;font-size:10px;margin-top:4px}.leaderboard{max-width:420px;margin:25px auto;display:grid;gap:9px}.leaderboard .row{background:#edf0e5;padding:12px 17px;border-radius:13px;justify-content:space-between}.external-frame{width:100%;height:calc(100vh - 220px);min-height:550px;border:1px solid var(--line);background:white;border-radius:17px}.external-bar{padding:15px;margin-bottom:16px;background:#e9ebdf;border-radius:14px}.external-bar p{font-size:12px;color:var(--muted)}.rules{font-size:14px;line-height:1.7}.rules p{margin-bottom:15px}.rules ul{padding-left:20px}.rules li{margin:8px 0}dialog{width:min(620px,calc(100vw - 30px));border:1px solid var(--line);padding:30px;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #14251d44;max-height:85vh}dialog::backdrop{background:#17282066;backdrop-filter:blur(4px)}dialog .close{float:right;border:0;background:#e7e8dc;border-radius:50%;width:32px;height:32px;font-size:18px}dialog h2{margin:4px 0 20px}#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(110px);background:#27392f;color:#fff;padding:13px 20px;border-radius:13px;box-shadow:0 8px 25px #19291c33;font-size:13px;z-index:100;transition:transform .2s;max-width:90vw}#toast.show{transform:translateX(-50%) translateY(0)}.connection{font-size:11px;color:#6e8560}.connection.bad{color:#ba5940}.hidden{display:none!important}.deck-row{padding:14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:13px}.deck-row p{overflow-wrap:anywhere}.deck-row small{display:block;font-size:10px}.loading{opacity:.5;pointer-events:none}.checkline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}.checkline input{width:18px;height:18px;accent-color:var(--accent)}
@media(min-width:1550px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1150px){.shell{grid-template-columns:165px minmax(0,1fr)}.rail{padding:27px 15px}.brand{font-size:25px}.main{padding-left:24px;padding-right:24px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr}.join-box{transform:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 18px}.join-box .row{margin:0;max-width:250px}.hero h1{max-width:600px}.room-layout{grid-template-columns:minmax(0,1fr) 210px}.room-side .panel{padding:14px}}@media(max-width:800px){.shell{display:block}.rail{position:static;height:auto;padding:19px 20px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;gap:15px;align-items:center;justify-content:space-between}.rail .brand{font-size:25px}.rail .brand small{font-size:9px;margin-top:6px}.rail nav{display:flex;gap:4px}.rail .nav-link{padding:9px;font-size:12px}.rail-bottom{display:none}.main{padding:18px 18px 35px}.topbar{margin-bottom:25px}.topbar .date{font-size:11px}.hero{gap:22px;padding-bottom:24px}.hero h1{font-size:38px;max-width:550px}.room-layout{display:flex;flex-direction:column}.game-stage,.room-side{width:100%}.room-side{grid-template-columns:1fr 1fr}.room-heading h1{font-size:30px}.login{display:block}.login-art{display:none}.login-form{padding:40px 22px;min-height:100vh}.login-form form{max-width:470px}.login-form h2{font-size:40px}.game-info{padding:16px}.game-info h3{font-size:17px}.external-frame{height:calc(100dvh - 275px);min-height:500px}.lobby-cover{max-height:230px}.color-card{width:78px;min-width:78px;height:114px}.color-card .value{font-size:29px}.hand{gap:6px}.answer-hand,.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.rail .nav-link span.label{display:none}.topbar .date{max-width:145px}.hero h1{font-size:36px}.game-grid{gap:13px}.game-info p{font-size:11px;min-height:48px;margin:6px 0 10px}.game-info{padding:13px}.game-info h3{font-size:16px}.game-info .row{font-size:10px;gap:5px}.game-cover{aspect-ratio:1.25}.game-cover .chip{font-size:9px;left:8px;top:8px;padding:4px 7px}.join-box{display:block}.join-box .row{margin-top:10px;max-width:none}.room-side{grid-template-columns:1fr}.panel{padding:18px}.task-heading h2{font-size:25px}.room-heading .row{flex-wrap:wrap}.room-heading h1{font-size:29px}.question-card{padding:20px}.question-card p{font-size:22px}.target-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.target{padding:12px 6px;font-size:12px}.color-card{width:66px;min-width:66px;height:100px}.color-card .value{font-size:26px}.play-table{padding:20px 10px}.opponents{gap:6px}.opponent{padding:6px 8px}.lobby-options{gap:10px}.avatar-picker{gap:4px}.proposal-row{align-items:flex-start}.footer{gap:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}