@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";
:root{--paper:#fdf7ec;--ink:#1a1a1a;--muted:#7a6f60;--accent-red:#c92121;--accent-green:#1f7a4d;--accent-gold:#c08a2a;--grid-line:#2f2a24;--shadow:#0000001f}*{box-sizing:border-box;margin:0;padding:0}.werewolf-game{background:var(--paper);color:var(--ink);scroll-snap-type:y proximity;background-image:radial-gradient(circle at 20% 20%,#0000000a,#0000 32%),radial-gradient(circle at 80% 40%,#00000009,#0000 28%),linear-gradient(#00000008,#0000 24%);min-height:100vh;font-family:Space Grotesk,sans-serif;overflow-x:hidden}.grain{pointer-events:none;opacity:.06;z-index:1000;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0}.game-header{text-align:center;padding:56px 24px 32px;animation:.4s ease-out fadeIn}.game-logo{width:72px;height:72px;filter:drop-shadow(0 6px 12px var(--shadow));margin:0 auto 16px;display:block}.game-title{letter-spacing:1px;text-transform:uppercase;color:var(--ink);border-bottom:3px solid var(--grid-line);margin-bottom:12px;padding-bottom:8px;font-family:Playfair Display,serif;font-size:clamp(42px,4vw,64px);font-weight:700;display:inline-block}.game-subtitle{color:var(--muted);letter-spacing:.5px;font-size:18px;font-style:italic}.game-hero{scroll-snap-align:start;grid-template-rows:auto 1fr;min-height:100vh;display:grid}.game-main{grid-template-rows:auto 1fr auto;grid-template-areas:"message""board""progress";align-items:stretch;gap:16px;width:min(1200px,100%);max-width:1200px;min-height:0;margin:0 auto;padding:2px;animation:.5s ease-out .1s backwards fadeIn;display:grid}.message{text-align:center;box-shadow:0 8px 24px var(--shadow);border-radius:8px;grid-area:message;margin-bottom:0;padding:16px 24px;font-family:Space Grotesk,sans-serif;font-size:18px;font-weight:600;animation:.3s ease-out fadeIn}.message.success{background:linear-gradient(135deg,var(--accent-green),#165b3b)}.message.error{background:linear-gradient(135deg,var(--accent-red),#8f1515)}.game-board{background:var(--paper);grid-area:board;grid-template-columns:repeat(var(--columns,5),minmax(0,1fr));grid-template-rows:repeat(var(--rows,5),minmax(90px,1fr));max-width:900px;min-height:calc(var(--rows,1)*90px + (var(--rows,1) - 1)*clamp(8px,1vw,12px));gap:clamp(8px,1vw,12px);margin:48px auto 32px;display:grid}.cell-wrapper{min-width:0;min-height:0}.character-cell{background:var(--paper);border:2px solid var(--grid-line);cursor:pointer;box-shadow:0 4px 12px var(--shadow);border-radius:8px;flex-direction:column;gap:8px;height:100%;padding:10px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.character-cell.unrevealed:hover{box-shadow:0 10px 26px var(--shadow);border-color:var(--accent-gold);transform:translateY(-2px)}.cell-hitbox{all:unset;cursor:inherit;flex-direction:column;flex:1;align-items:stretch;gap:8px;width:100%;display:flex}.cell-hitbox:disabled{cursor:default}.cell-hitbox:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px;border-radius:6px}.cell-header{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.cell-coordinates{letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-size:10px;line-height:1.3}.character-cell.revealed{cursor:default}.character-cell.revealed.villager{border-color:var(--accent-green);background:linear-gradient(135deg,#1f7a4d24,#1f7a4d14);box-shadow:0 10px 28px #1f7a4d40}.character-cell.revealed.werewolf{border-color:var(--accent-red);background:linear-gradient(135deg,#c9212129,#c9212114);box-shadow:0 10px 28px #c9212140}.name{letter-spacing:.8px;text-transform:uppercase;color:var(--ink);margin-bottom:2px;font-size:32px;font-weight:800}.unrevealed-name{text-align:center;margin:0 auto}.role-badge{text-transform:uppercase;letter-spacing:1px;color:var(--ink);background:#00000012;border-radius:4px;align-self:flex-end;padding:4px 8px;font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:700}.statement{border:1px dashed var(--grid-line);color:var(--muted);background:#00000008;border-radius:6px;max-height:none;margin-top:8px;padding:10px;font-size:9px;font-style:italic;line-height:1.4;animation:.4s ease-out slideDown;overflow:visible}.cell-body{flex:1;justify-content:center;align-items:center;display:flex}.character-cell.revealed .cell-body{justify-content:flex-start;align-items:flex-start}.statement.compact{color:var(--ink);text-align:left;background:0 0;border:none;margin:0;padding:0;font-size:12px;font-style:normal;line-height:1.5}.name-inline{margin-right:4px;font-size:16px;font-weight:700}.referenced-pop{color:var(--accent-gold);text-shadow:0 0 #0000;animation:1.2s ease-in-out infinite referencedPop;display:inline-block}@keyframes referencedPop{0%{text-shadow:0 0 #0000;transform:translateY(0)scale(1)}50%{text-shadow:0 6px 12px #00000026;transform:translateY(-1px)scale(1.07)}to{text-shadow:0 0 #0000;transform:translateY(0)scale(1)}}.referenced-flash{animation:.9s referencedFlash}@keyframes referencedFlash{0%{filter:drop-shadow(0 0 #0000);transform:scale(1)}40%{filter:drop-shadow(0 8px 18px #0003);transform:scale(1.08)}to{filter:drop-shadow(0 0 #0000);transform:scale(1)}}.referenced-glow{animation:1s ease-out referencedGlow;position:relative;box-shadow:0 0 #c08a2a00}.referenced-glow:after{content:"";pointer-events:none;border:2px solid #c08a2a99;border-radius:12px;animation:1s ease-out referencedGlowRing;position:absolute;inset:-6px;box-shadow:0 0 18px #c08a2a73,0 0 32px #c08a2a59}@keyframes referencedGlow{0%{transform:translateY(0);box-shadow:0 0 #c08a2a00}40%{transform:translateY(-2px);box-shadow:0 10px 24px #c08a2a59}to{transform:translateY(0);box-shadow:0 0 #c08a2a00}}@keyframes referencedGlowRing{0%{opacity:0;transform:scale(.94)}40%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}.progress{border:2px solid var(--grid-line);width:min(900px,100%);max-width:900px;box-shadow:0 14px 32px var(--shadow);background:linear-gradient(135deg,#1f7a4d14,#c08a2a0f);border-radius:14px;grid-area:progress;margin:0 auto 24px;padding:16px 18px 14px;position:relative;overflow:hidden}.progress:before{content:"";opacity:.35;pointer-events:none;background:radial-gradient(circle at 15% 30%,#c08a2a26,#0000 40%),radial-gradient(circle at 80% 70%,#1f7a4d33,#0000 35%);position:absolute;inset:0}.progress-header{z-index:1;justify-content:flex-start;align-items:baseline;display:flex;position:relative}.progress-label{gap:2px;display:grid}.progress-eyebrow{text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);font-size:10px}.progress-count{color:var(--ink);font-family:Playfair Display,serif;font-size:20px;font-weight:700}.progress-bar{z-index:1;margin-top:12px;padding:12px 2px 10px;position:relative}.progress-track{border:1px solid var(--grid-line);background:linear-gradient(#ffffffbf,#0000000d);border-radius:999px;width:100%;height:14px;position:relative;overflow:hidden;box-shadow:inset 0 1px 6px #00000026}.progress-fill{background:linear-gradient(90deg,#1f7a4d4d,#1f7a4d8c) 0 0/150% 150%;width:0%;transition:width .4s;animation:3s ease-in-out infinite shimmer;position:absolute;inset:0;box-shadow:inset 0 0 12px #0000001f,0 6px 14px #1f7a4d40}.progress-fill.complete{background:linear-gradient(90deg,var(--accent-green),#1a5f41);animation:none}.progress-caption{color:var(--muted);z-index:1;margin-top:10px;font-size:13px;font-style:italic;position:relative}.rules-section,.explanation-section{background:var(--paper);border:2px solid var(--grid-line);max-width:900px;box-shadow:0 16px 38px var(--shadow);scroll-snap-align:start;border-radius:12px;margin:48px auto 32px;padding:32px;animation:.6s ease-out fadeIn}.section-title{color:var(--ink);text-align:left;text-transform:uppercase;letter-spacing:2px;border-bottom:2px solid var(--grid-line);margin-bottom:16px;padding-bottom:10px;font-family:Playfair Display,serif;font-size:26px;font-weight:700}.rules-content,.explanation-content{color:var(--muted);font-size:16px;line-height:1.8}.rules-content p{margin-bottom:16px}.warning{color:var(--accent-gold);border-left:4px solid var(--grid-line);background:#c08a2a1f;border-radius:8px;padding:16px;font-size:17px;font-weight:600}.explanation-content ul{margin:0;padding-left:24px;list-style-type:disc}.explanation-content li{margin-bottom:12px}.villager-text{color:var(--accent-green)}.werewolf-text{color:var(--accent-red)}.highlight{color:var(--accent-gold);font-weight:600}.modal-overlay{z-index:1001;background:#000000d9;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--paper);border:2px solid var(--accent-gold);width:90%;max-width:400px;box-shadow:0 20px 60px var(--shadow);border-radius:12px;padding:32px;animation:.3s ease-out fadeIn;position:relative}.modal-title{text-align:center;text-transform:uppercase;letter-spacing:2px;color:var(--accent-gold);margin-bottom:24px;font-family:Playfair Display,serif;font-size:20px;font-weight:700}.modal-close{border:2px solid var(--grid-line);width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border-radius:50%;font-weight:700;line-height:1;position:absolute;top:10px;right:10px}.modal-close:hover{border-color:var(--accent-gold);color:var(--accent-gold)}.modal-buttons{flex-direction:column;gap:12px;display:flex}.modal-buttons button{color:var(--paper);cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:2px solid;border-radius:8px;padding:16px;font-family:Space Grotesk,sans-serif;font-size:16px;font-weight:700;transition:all .2s}.btn-villager{background:linear-gradient(135deg,var(--accent-green),#165b3b);border-color:var(--accent-green);box-shadow:0 4px 12px #1f7a4d59}.btn-villager:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2d6a4f80}.btn-werewolf{background:linear-gradient(135deg,var(--accent-red),#8f1515);border-color:var(--accent-red);box-shadow:0 4px 12px #c9212159}.btn-werewolf:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d6282880}.game-footer{text-align:center;color:var(--muted);border-top:1px solid var(--grid-line);margin-top:48px;padding:32px;font-size:14px}.game-footer-nav{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;display:flex}.footer-link{color:var(--accent-red);letter-spacing:.5px;font-weight:700;text-decoration:none}.footer-link:hover{color:var(--accent-gold);text-decoration:underline}.celebration-overlay{z-index:1200;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000000bf;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.celebration-card{background:var(--paper);border:2px solid var(--grid-line);text-align:left;border-radius:14px;width:min(520px,100%);max-width:520px;padding:28px;position:relative;box-shadow:0 24px 64px #0000004d}.celebration-close{top:12px;right:12px}.celebration-header{align-items:center;gap:10px;margin-bottom:16px;display:flex}.celebration-confetti-emoji{font-size:26px}.celebration-card h3{letter-spacing:1px;text-transform:uppercase;font-family:Playfair Display,serif;font-size:22px}.share-text{border:1px dashed var(--grid-line);white-space:pre-wrap;background:#0000000a;border-radius:8px;margin-bottom:12px;padding:14px;font-family:Space Grotesk,sans-serif;font-size:14px;line-height:1.5}.share-grid{letter-spacing:2px;text-align:center;background:#1f7a4d14;border:1px solid #1f7a4d59;border-radius:8px;margin-bottom:12px;padding:12px;font-size:20px;line-height:1.4}.legend{color:var(--muted);margin-bottom:16px;font-size:13px}.celebration-actions{flex-wrap:wrap;gap:12px;display:flex}.share-button{color:#fff;cursor:pointer;letter-spacing:.6px;background:linear-gradient(135deg,#1d9bf0,#0f6cc6);border:none;border-radius:10px;padding:12px 18px;font-weight:700;box-shadow:0 10px 26px #0f6cc659}.share-button:hover{transform:translateY(-1px);box-shadow:0 12px 32px #0f6cc673}.secondary-button{border:2px solid var(--grid-line);cursor:pointer;color:var(--ink);background:0 0;border-radius:10px;padding:11px 16px;font-weight:700}.share-status{color:var(--muted);margin-top:10px;font-size:13px}.confetti-overlay{pointer-events:none;z-index:1100;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;border-radius:2px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:1;position:absolute;top:-10%}@keyframes confetti-fall{0%{transform:translateY(0)rotate(var(--start-rot,0deg));opacity:1}50%{opacity:1}to{transform:translateY(110vh)rotate(var(--end-rot,540deg));opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes shimmer{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@media (max-width:768px){.game-title{letter-spacing:2px;font-size:36px}.game-subtitle{font-size:16px}.game-board{padding:2px}.rules-section,.explanation-section{margin:32px auto 24px;padding:24px}.section-title{font-size:24px}.modal-content{padding:24px}}@media (min-width:1024px){.emoji{font-size:32px}.name{font-size:16px}}@media (max-width:480px){.game-title{font-size:28px}.character-cell{padding:12px 8px}.name{font-size:16px}.characteristic{font-size:9px}}