@font-face{font-family:"Nunito";src:url("./fonts/nunito.ttf") format("truetype");font-style:normal;font-weight:200 1000;font-display:swap}
@font-face{font-family:"Bree Serif";src:url("./fonts/bree-serif.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{--nature-body:"Nunito",sans-serif;--nature-display:"Bree Serif",serif}
body,#room-interface{font-family:var(--nature-body)}
#room-interface input,#room-interface select,#room-interface button{font-family:inherit}
#room-interface h1,#room-interface h2,#room-interface .lobby-avatar{font-family:var(--nature-display);letter-spacing:0}
#minigame-interface{position:fixed;inset:0;z-index:3;pointer-events:none;color:#2d4a31;font-family:var(--nature-body)}
#minigame-interface[hidden],#minigame-interface [hidden]{display:none!important}
.nature-tide-flash{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;background:rgba(198,35,39,.62)}
.nature-country{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:9px;color:#3d3424}
.nature-country img{width:48px;height:33px;object-fit:fill}
.nature-country span{max-width:150px;text-align:left;font:400 17px/1.05 var(--nature-display)}
.nature-hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(630px,calc(100% - 156px));display:flex;flex-direction:column;align-items:center;gap:4px}
.nature-timer{width:214px;height:106px;position:relative;display:grid;place-items:center;flex:none}
.nature-timer::before{content:"";position:absolute;left:50%;top:50%;width:620px;height:300px;transform:translate(-50%,-50%) scale(.36);background:url("./assets/ui/woodland-hud-soft-shadows.png") 0 -120px / 1536px 1024px;pointer-events:none}
.nature-timer span{position:relative;font:400 43px/1 var(--nature-display);font-variant-numeric:tabular-nums;text-shadow:0 1px #fff9e9;letter-spacing:1px}
.nature-timer.is-urgent{color:#a54c32}
.nature-instruction{margin:0;text-align:center;font-size:15px;line-height:1.45;font-weight:800;text-wrap:balance;max-width:100%;padding:7px 17px;border-radius:18px;background:#fff9e9ed;box-shadow:0 2px 8px #203b2312}
.nature-settings{position:absolute;right:max(17px,env(safe-area-inset-right));top:max(19px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px}
.nature-icon{width:58px;height:58px;border:0;padding:0;background:none;position:relative;cursor:pointer;pointer-events:auto;touch-action:manipulation;border-radius:50%;transition:transform .15s,filter .15s}
.nature-icon span{display:block;position:absolute;left:50%;top:50%;width:410px;height:410px;transform:translate(-50%,-50%) scale(var(--icon-scale,.141463));background-image:url("./assets/ui/woodland-hud-soft-shadows.png");background-size:1536px 1024px;pointer-events:none}
.nature-gear span{background-position:-628px -61px}.nature-zoom-in span{background-position:-1094px -61px}.nature-zoom-out span{background-position:-56px -540px}.nature-sound-on span{background-position:-577px -540px}.nature-sound-off span{background-position:-1094px -540px}
.nature-icon:hover{transform:translateY(-1px);filter:brightness(1.08)}.nature-icon:active{transform:scale(.94)}.nature-icon:disabled{opacity:.45;cursor:default;transform:none}
.nature-icon:focus-visible,.nature-actions button:focus-visible{outline:3px solid #fff8df;outline-offset:3px;box-shadow:0 0 0 6px #466b40}
#nature-options{display:flex;flex-direction:column;gap:8px;align-items:center;padding-top:4px}
/* The control frames reuse the same wooden ring and leaves as the settings. */
.nature-controls{--pad-size:176px;--action-size:132px;position:absolute;inset:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.nature-dpad,.nature-actions{position:absolute;bottom:max(22px,env(safe-area-inset-bottom))}
.nature-dpad{left:max(20px,env(safe-area-inset-left));width:var(--pad-size);height:var(--pad-size);pointer-events:auto;touch-action:none;border-radius:50%;isolation:isolate;outline:none;--stick-x:0px;--stick-y:0px}
.nature-dpad::before,.nature-actions button::before{content:"";position:absolute;inset:0;border-radius:50%;background:url("./assets/ui/woodland-hud-soft-shadows.png") 55.7726% 9.9349% / 374.6341% 249.7561%;pointer-events:none;z-index:-2;filter:drop-shadow(0 3px 2px #3c241d33)}
.nature-dpad::after,.nature-actions button::after{content:"";position:absolute;inset:19%;border:2px solid #9b642d;border-radius:50%;background:radial-gradient(circle at 40% 25%,#fff9e9,#efdab3);box-shadow:inset 0 2px 3px #642d1626;pointer-events:none;z-index:-1}
.nature-stick{position:absolute;z-index:1;left:50%;top:50%;width:40%;height:40%;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));border:3px solid #642d16;border-radius:50%;background:radial-gradient(circle at 38% 28%,#9fc879,#5b8f4e 68%,#3e6c3d);box-shadow:inset 0 2px 3px #fff9e966,0 4px 5px #37211655;pointer-events:none;transition:transform .08s ease-out}
.nature-dpad[aria-disabled="true"]{filter:saturate(.45);opacity:.65;cursor:default}
.nature-dpad:focus-visible{outline:3px solid #fff8df;outline-offset:4px;box-shadow:0 0 0 6px #466b40}
.nature-dpad:active .nature-stick{transition:none}
.nature-actions{right:max(20px,env(safe-area-inset-right));display:flex;align-items:flex-end;gap:8px}
.nature-actions button{position:relative;isolation:isolate;display:grid;place-items:center;pointer-events:auto;touch-action:manipulation;cursor:pointer;width:var(--action-size);height:var(--action-size);padding:0;border:0;border-radius:50%;background:none;color:#642d16;transition:transform .1s,filter .1s}
.nature-actions button::after{inset:18%;background:radial-gradient(circle at 40% 25%,#ffe995,#f8c83d 65%,#e9ae2d)}
.nature-actions button span{font:900 14px/1.1 var(--nature-body);text-align:center;max-width:78%;text-shadow:0 1px #fff9e9a6}
.nature-actions .nature-charge{width:112px;height:112px;align-self:center}.nature-actions .nature-charge::after{background:radial-gradient(circle at 40% 25%,#fff9e9,#efdab3)}.nature-actions .nature-charge span{font-size:12px}
.nature-actions button:not(:disabled):active{transform:translateY(3px) scale(.96);filter:brightness(.96)}
.nature-actions button:disabled{filter:saturate(.45);opacity:.65;cursor:default}
.nature-controls.is-race{--action-size:210px}.is-race .nature-actions{right:50%;transform:translateX(50%)}.is-race .nature-action span{font:400 36px/1 var(--nature-display)}
@media(max-width:600px){.nature-hud{top:max(9px,env(safe-area-inset-top));width:calc(100% - 104px);left:calc(50% - 15px);gap:2px}.nature-timer{width:180px;height:89px}.nature-timer::before{transform:translate(-50%,-50%) scale(.3)}.nature-timer span{font-size:36px}.nature-instruction{font-size:12px;line-height:1.4;padding:7px 11px;border-radius:14px}.nature-settings{top:max(17px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.nature-icon{width:46px;height:46px;--icon-scale:.112195}#nature-options{gap:10px}.nature-controls{--pad-size:148px;--action-size:122px}.nature-dpad{left:max(10px,env(safe-area-inset-left))}.nature-actions{right:max(10px,env(safe-area-inset-right));gap:2px}.nature-actions .nature-charge{width:96px;height:96px}.nature-actions .nature-charge span{font-size:11px}.nature-controls.is-race{--action-size:190px}}
@media(max-width:400px){.nature-actions{gap:8px}.nature-controls{--pad-size:132px;--action-size:112px}.nature-actions .nature-charge{width:82px;height:82px}.nature-actions .nature-charge span{font-size:10px}.nature-actions button span{font-size:12px}}
@media(max-width:360px){.nature-actions:has(.nature-charge:not([hidden])){flex-direction:column;align-items:center;gap:6px}}
@media(max-height:500px){.nature-controls{--pad-size:132px;--action-size:112px}.nature-controls.is-race{--action-size:150px}.nature-dpad,.nature-actions{bottom:max(10px,env(safe-area-inset-bottom))}.nature-actions .nature-charge{width:96px;height:96px}.is-race .nature-action span{font-size:28px}.nature-hud{top:4px;gap:0}.nature-timer{width:150px;height:74px}.nature-timer::before{transform:translate(-50%,-50%) scale(.25)}.nature-timer span{font-size:31px}.nature-instruction{font-size:11px;padding:5px 12px}.nature-settings{top:10px}.nature-icon{width:44px;height:44px;--icon-scale:.107317}#nature-options{gap:5px}}
@media(prefers-reduced-motion:reduce){.nature-icon,.nature-actions button{transition:none}}

@media(max-width:600px){.nature-country{top:max(9px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));width:126px;height:62px;gap:5px}.nature-country::before{transform:translate(-50%,-50%) scale(.21)}.nature-country img{width:29px;height:20px}.nature-country span{max-width:78px;font-size:11px}}
.nature-tide-flash{background:rgba(185,18,27,.84)}
.nature-wave-alert{margin:0;max-width:100%;padding:7px 17px;border:2px solid #fff4d9;border-radius:16px;color:#fff9e9;background:linear-gradient(135deg,#922d2b,#c34432);box-shadow:0 3px 12px #4a17177a;text-align:center;text-wrap:balance;font-size:14px;line-height:1.25;font-weight:1000;letter-spacing:.25px;text-shadow:0 1px 2px #52201e;animation:nature-wave-pulse 1.25s ease-in-out infinite alternate}
@keyframes nature-wave-pulse{from{filter:brightness(.92);transform:scale(.99)}to{filter:brightness(1.12);transform:scale(1)}}
@media(max-width:600px){.nature-wave-alert{font-size:11px;padding:6px 11px;border-width:1.5px;border-radius:13px}}
@media(prefers-reduced-motion:reduce){.nature-wave-alert{animation:none}}