@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root{font-family:'DotGothic16',monospace;color:#322c25;background:#101b2c;font-synthesis:none}
html,body{background:#101b2c}
body{background:repeating-linear-gradient(0deg,#101b2c 0 18px,#122039 18px 20px)}
button{font-family:inherit;border-radius:0!important}
button:focus-visible{outline:3px solid #efc765;outline-offset:3px}
.noise{display:none}
.animal-art{image-rendering:pixelated;filter:none}

/* Title scene uses the same landscape and animal art as the game. */
.start{min-height:100dvh;padding:0;display:flex;align-items:center;justify-content:center}
.start-card{width:min(390px,100%);height:min(844px,100dvh);min-height:0;padding:0;display:flex;flex-direction:column;border:4px solid #382c25;border-radius:0;background:#f0e3c5;box-shadow:10px 10px 0 #060c15,0 24px 80px #0008}
.start-card:before{display:none}
.start-scene{position:relative;flex:0 0 58%;min-height:0;overflow:hidden;background:#1576a6 url('./assets/backgrounds/village-dawn.png') center/100% 100% no-repeat;image-rendering:pixelated;border-bottom:5px solid #2f392d}
.start-title{position:absolute;z-index:3;top:24px;left:20px;right:12px;margin:0!important;color:#f4bf4e;font-size:clamp(32px,10vw,42px)!important;font-weight:400!important;line-height:1.28!important;letter-spacing:.015em!important;-webkit-text-stroke:1px #5c321b;text-shadow:3px 3px 0 #5c321b,-2px 2px 0 #5c321b,2px -2px 0 #5c321b,5px 5px 0 #1e241e}
.start-title span{display:block;white-space:nowrap}
.start-animal{position:absolute;z-index:2;filter:sepia(.08) saturate(.94) contrast(1.06) drop-shadow(3px 4px 0 #4b4b2d9c)}
.start-cow{left:17%;bottom:13%}.start-chicken{left:45%;bottom:24%}.start-sheep{left:39%;bottom:2%}.start-pig{left:62%;bottom:13%}
.start-content{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 22px 18px;color:#382e25;background:#f0e3c5}
.start .eyebrow{font-size:12px;letter-spacing:.06em;color:#a54842}
.start-content h2{font-size:22px;line-height:1.35;margin:15px 0 9px;color:#2f2b27;font-weight:400}
.start-content p{font-size:13px;line-height:1.7;color:#5f5548;margin:0}
.start-content .rule{margin:auto 0 10px;padding:10px 0 0;border:0;border-top:2px solid #c7b08a;color:#6f624f;font-size:11px;line-height:1.45}
.start-content .primary{width:100%;min-height:50px;padding:8px 14px;font-size:17px}
.start-content small{margin:8px 0 0;font-size:9px;line-height:1.3;color:#83745c}

.primary,.secondary,.ghost,.choice,.target{border:2px solid #563d30;box-shadow:3px 3px 0 #5d4d3d;transition:background .12s,transform .12s}
.primary{background:#a94b40;color:#fff6df;border-color:#64382f;box-shadow:4px 4px 0 #543b2c}
.primary:hover{background:#bd5848}
.secondary,.ghost{background:#f0dfba;color:#43392b;border-color:#79634b}
.secondary:hover,.ghost:hover{background:#fff0cc;color:#2f281e;border-color:#4d4935}
.primary:hover,.secondary:hover,.ghost:hover,.choice:hover,.target:hover{transform:translate(-1px,-1px)}

/* Warm paper stays readable as the frame gets darker over three days. */
.shell{--paper:#f0e3c5;--chat:#f5ebd3;--ink:#362e27;--muted:#705f4f;--edge:#786248;--head:#1e4e70;--roster:#4d8258;--own:#e8b18b;min-height:100vh;background:#cfb98b;color:var(--ink);max-width:1320px;padding:0 16px 17px}
.shell.day-2{--paper:#e6d3ae;--chat:#eee0bf;--edge:#745340;--head:#413653;--roster:#536448;--own:#db9b81;background:#a9866e}
.shell.day-3{--paper:#dbc4a9;--chat:#e7d3b5;--edge:#694540;--head:#261e3a;--roster:#4d4b45;--own:#ca8877;background:#6b4b52}
.topbar{margin:0 -16px;padding:12px 16px;border-bottom:4px solid #203241;background:#123b62;color:#f1da98}
.day-2 .topbar{background:#38283d;border-color:#5e393b}.day-3 .topbar{background:#211c2f;border-color:#753942}
.brand{font-size:16px;color:#f8dc8d;letter-spacing:.02em;font-weight:400}
.brand .red{color:#ffd06a}
.meta span{border:2px solid #517080;background:#15324c;color:#fff2d6;padding:5px 7px;font-size:10px;letter-spacing:0}
.day-2 .meta span,.day-3 .meta span{background:#3a2c3b;border-color:#815b5e}
.grid{gap:12px;margin-top:15px}
.panel{border:3px solid var(--edge);background:var(--paper);box-shadow:4px 4px 0 #443829}
.side,.board{color:var(--ink)}
.side h2,.board h2{color:#44392c;font-size:14px;letter-spacing:.03em;font-weight:400}
.brief-list li{color:#4b4034;border-left:3px solid #a04b42;font-size:13px}
.side-note,.board-intro{color:#786a56}
.locked-copy{color:#5d423c}
.chat{background:var(--chat);border:3px solid var(--edge)}
.chat-head{background:var(--head);border-bottom:4px solid #27394b;color:#fff0cb}
.chat-head strong{font-weight:400;font-size:15px;letter-spacing:.03em}
.chat-head span{color:#d7dece}
.chat-body{background-color:var(--chat);background-image:linear-gradient(#b8a47e18 1px,transparent 1px),linear-gradient(90deg,#b8a47e18 1px,transparent 1px);background-size:18px 18px;scrollbar-color:#9c8566 transparent}
.day-divider{color:#77574c;font-size:11px;letter-spacing:.08em}
.avatar{border:2px solid #8f7759;background:#d3bb91;color:#46372d}
.line.me .avatar{background:#c78d76;border-color:#875344}
.speaker{font-size:11px;color:#65513f}
.bubble{background:#fff7df;border:2px solid #9d8461;box-shadow:3px 3px 0 #c9b594;color:#3c332b;font-size:14px;line-height:1.65}
.line.me .bubble{background:var(--own);border-color:#9b594a;color:#372a26;box-shadow:3px 3px 0 #ad7865}
.system-line{color:#725a4d;font-size:12px;letter-spacing:0;border:1px dashed #a98e67;padding:8px;background:#f2e5c8}
.chat-foot{background:#e9d8b5;border-top:3px solid #af9674;color:#473c2f}
.foot-hint{color:#70604d}.foot-actions button{font-size:12px}
.roster-chip{border:2px solid #8e7759;background:#f0dfba;color:#514536;min-height:46px;font-weight:400}
.roster-chip.speaking{background:#e9b285;border-color:#9d5a41;color:#2d2922;box-shadow:inset 0 0 0 2px #efce9c}
.roster-chip.gone{opacity:.42}
.mobile-hud{background:var(--paper);border-bottom:3px solid var(--edge)}
.mobile-hud>div:first-child{color:#695746}.mobile-hud strong{color:#9e413c}.mobile-hud small{color:#7c6755}
.mobile-hud-bar,.bar{height:6px;border:1px solid #775947;background:#d9c8a5}
.mobile-hud-bar i,.bar i{background:repeating-linear-gradient(90deg,#a84840 0 10px,#bf5b48 10px 12px)}
.board .person{border-bottom:1px dashed #ab9472}.person-top .value{color:#a64540}.person.me .person-top{color:#883a35}
.meter-unknown{background:repeating-linear-gradient(90deg,#a68978 0 8px,#d8c2a4 8px 14px)!important}
.status-note{border:2px solid #a06d59;background:#ead3b5;color:#784b40}
.question-stage{background:linear-gradient(#102b40d9,#1c2a35e6),url('./assets/backgrounds/village-dawn.png') center 60%/cover;color:#fff2d8}
.question-stage .label,.label{color:#eecb89;letter-spacing:.08em}
.question-face{background:#f1dfb7;border:3px solid #8a5a42;color:#332b25}
.question-asker{color:#f2d0a0}.question-stage h2{font-weight:400;text-shadow:2px 2px 0 #152530}
.timer{height:8px;border:2px solid #f0c782;background:#674743}
.timer i{background:repeating-linear-gradient(90deg,#e3b35c 0 11px,#f5d486 11px 13px)}
.seconds{color:#f7ddb3}
.choice{background:#f5e7c6;border-color:#7d5d45;color:#3a3128;box-shadow:3px 3px 0 #213443;font-size:14px}
.choice:hover{background:#fff1d2;border-color:#d39453}
.question-tip{color:#e5ca9c}
.event-panel{background:linear-gradient(#142b3ad9,#26302fe0),url('./assets/backgrounds/village-dawn.png') center/cover}
.event-card{border:4px solid #6d4e3e;background:#f0e1c0;box-shadow:6px 6px 0 #182533;color:#372e26}
.event-card h2{font-weight:400}.event-card p{color:#655446}
.target{background:#fff1d0;color:#3c3027;border-color:#8f7252}.target:hover{background:#f8dbad}
.target small{color:#8d5849}.result-list{border-top:2px solid #baa17b;color:#695746}.result-badge{color:#a84942}
.mobile-nav{background:#453b32;border-top:3px solid #ab865f}
.mobile-nav button{color:#ead5af}.mobile-nav button[aria-current="page"],.mobile-nav button[aria-expanded="true"]{color:#ffd378}
.mobile-nav button:active{background:#775342}
.drawer-backdrop{background:#0a1016b8}
.panel-close{border:2px solid #8a6950;background:#ead2aa;color:#4a3528}
.drawer-settings button{font-size:12px}

/* The village turns unfamiliar after each night. All details use hard pixel edges. */
.day-2 .chat-body{background-color:#e8d9bc;background-image:linear-gradient(90deg,#764c4b0d 0 2px,transparent 2px 18px),linear-gradient(#5e3d4a12 1px,transparent 1px),linear-gradient(90deg,#5e3d4a12 1px,transparent 1px);background-size:37px 100%,18px 18px,18px 18px}
.day-3 .chat-body{background-color:#dec5b5;background-image:linear-gradient(135deg,#842e3826,transparent 38%),linear-gradient(0deg,#6f35401c 0 2px,transparent 2px 14px),linear-gradient(90deg,#6f35401c 0 2px,transparent 2px 14px);background-size:100% 100%,14px 14px,14px 14px}
.day-2 .chat-head{border-bottom-color:#61424d}
.day-3 .chat-head{border-bottom-color:#a13f4b}
.day-3 .chat{border-color:#763842;box-shadow:4px 4px 0 #351f2e,inset 0 0 0 3px #863b48}
.day-3 .system-line{border-color:#9a4a4e;background:#e5c5bb;color:#63383e}
.day-3 .bubble{box-shadow:3px 3px 0 #af8c8b}
.day-3 .chat-foot{background:#dac0aa;border-top-color:#884e50}
.day-3 .event-panel{background:linear-gradient(#23131fe8,#36202ae8),url('./assets/backgrounds/village-dawn.png') center/cover}
.day-3 .event-card{border-color:#813e4b;box-shadow:6px 6px 0 #281e2b}
.day-3 .mobile-nav{background:#352b35;border-top-color:#914451}

/* Animated static crosses the whole game screen without blocking controls. */
.day-2::after,.day-3::after{content:'';position:fixed;inset:-8px 0;z-index:25;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent 0 3px,#28182155 3px 4px,transparent 4px 7px);background-size:128px 128px,100% 7px;image-rendering:pixelated;mix-blend-mode:multiply;animation:screen-static 1.3s steps(5,end) infinite}
.day-2::after{opacity:.21}
.day-3::after{opacity:.33;animation-duration:.75s}
.day-2::before,.day-3::before{content:'';position:fixed;inset:0;z-index:24;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 36px,#56384738 36px 39px,transparent 39px 59px,#f6e1cb5c 59px 61px,transparent 61px 88px);animation:scan-roll 1.7s linear infinite}
.day-3::before{background:repeating-linear-gradient(0deg,transparent 0 34px,#8c2f475c 34px 39px,transparent 39px 58px,#ffdfce8c 58px 61px,transparent 61px 88px);animation-duration:1.1s}
@keyframes screen-static{0%{transform:translate(0,0)}25%{transform:translate(-5px,3px)}50%{transform:translate(4px,-4px)}75%{transform:translate(-3px,5px)}100%{transform:translate(0,0)}}
@keyframes scan-roll{to{background-position:0 88px}}

@media(max-width:700px){
  .start-card{width:100vw;height:100dvh;border:0;box-shadow:none}
  .start-scene{flex-basis:58%}
  .start-title{font-size:clamp(31px,10vw,42px)!important;top:calc(21px + env(safe-area-inset-top))}
  .start-content{padding:15px 22px calc(15px + env(safe-area-inset-bottom))}
  .start-content h2{font-size:20px;margin:10px 0 7px}
  .start-content p{font-size:12px}
  .start-content .primary{min-height:49px}
  .shell{height:100dvh;padding:env(safe-area-inset-top) 0 0;overflow:hidden}
  .topbar{margin:0;padding:9px 12px;min-height:48px}
  .brand{font-size:13px;white-space:normal;line-height:1.15}
  .meta span{font-size:9px;padding:4px 5px}
  .mobile-hud{padding:7px 13px 8px}
  .roster{background:var(--roster);border-bottom:3px solid #36503d;padding:5px 7px;gap:3px}
  .roster-chip{min-height:42px;font-size:10px;gap:2px}
  .chat{border:0;box-shadow:none}
  .chat-head{padding:8px 13px;min-height:42px}
  .chat-head strong{font-size:13px}.chat-head span{font-size:10px}
  .chat-body{padding:14px 12px}
  .line{margin-bottom:15px}.bubble{font-size:13px;padding:9px 10px}.bubble-wrap{max-width:83%}
  .chat-foot{padding:7px 11px;min-height:55px}.foot-hint{font-size:10px}
  .mobile-nav{min-height:61px;padding:3px 7px calc(3px + env(safe-area-inset-bottom))}
  .mobile-nav button{font-size:11px;min-height:51px}
  .side,.board{border:3px solid var(--edge);border-bottom:0;border-radius:0;background:var(--paper);box-shadow:0 -10px 0 #1b253288;padding:21px 18px calc(20px + env(safe-area-inset-bottom))}
  .side h2,.board h2{font-size:16px}.brief-list li{font-size:14px}.board .person-top{font-size:13px}
  .question-stage{padding:15px 15px 19px}
  .question-stage h2{font-size:clamp(19px,5vw,24px)}
  .choice{min-height:55px;font-size:14px;padding:10px 12px}
  .event-panel{padding:14px}.event-card{padding:25px 18px}
}
@media(max-width:700px) and (max-height:690px){
  .start-scene{flex-basis:52%}
  .start-title{font-size:30px!important;top:15px}
  .start-content{padding-top:9px}.start-content h2{font-size:18px;margin:8px 0 6px}.start-content p{font-size:11px}
  .start-content .rule{font-size:10px;padding-top:7px;margin-bottom:7px}
  .start-content .primary{min-height:44px}
  .choice{min-height:45px}
}