*{box-sizing:border-box}
:root{--brown:#7b4a2a;--tile:#e8f4f8;--tile2:#d6ecf3;--ink:#2b1d14;--accent:#ffcf3f;--blue:#3aa0d8}
html,body{margin:0;overflow-x:hidden}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fff8ec;color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.top{background:var(--brown);color:#fff;padding:10px 12px 0;position:sticky;top:0;z-index:5}
h1{margin:0 0 8px;font-size:1.6rem;text-align:center;letter-spacing:.5px}
nav{display:flex;gap:4px}
nav button{flex:1;border:0;padding:10px 4px;font-size:1rem;font-weight:700;background:rgba(255,255,255,.15);color:#fff;border-radius:12px 12px 0 0;cursor:pointer}
nav button.on{background:#fff8ec;color:var(--brown)}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:12px}
.tab{display:none}.tab.on{display:block}
.lead{text-align:center;margin:4px 0 10px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;justify-content:center;margin:8px 0}
.btn{border:0;border-radius:14px;padding:10px 14px;font-size:1rem;font-weight:700;background:#fff;color:var(--brown);box-shadow:0 3px 0 #d8c3a8;cursor:pointer}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #d8c3a8}
.btn.big{display:block;width:100%;margin:12px 0;padding:14px;font-size:1.15rem;background:var(--accent)}
.btn.huge{display:block;width:100%;padding:24px;font-size:1.8rem;background:#8bd17c;color:#123;border-radius:24px;margin:10px 0 16px}
.btn.huge.running{background:var(--blue);color:#fff}
.btn.ghost{background:transparent;box-shadow:none}
.link{background:none;border:0;color:var(--blue);text-decoration:underline;cursor:pointer;font-size:inherit}
.hint{font-size:.85rem;color:#6b5a4c;text-align:center;margin:4px 0}.center{text-align:center}
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:min(100%,420px);margin:0 auto;padding:6px;background:#9fc6d4;border-radius:14px;border:3px solid #6e9fb1;touch-action:manipulation}
.board.small{width:min(70%,300px)}
.cell{aspect-ratio:1;border:0;padding:0;border-radius:5px;background:var(--tile);font-size:clamp(12px,5vw,22px);display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;user-select:none}
.cell:nth-child(odd){background:var(--tile2)}
.small .cell{font-size:clamp(9px,3.4vw,15px);cursor:default}
.cell.ship{background:#c99a6b!important}
.cell.hit{background:#ffd2b0!important;animation:pop .35s}
.cell.miss{background:#b9e0f0!important}
.cell.sunk{background:#9a6a44!important}
.cell.preview{outline:3px dashed var(--brown);outline-offset:-3px}
.cell.bad{outline-color:#d33}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.blabel{font-size:1rem;margin:12px 0 6px;text-align:center}
.status{text-align:center;font-weight:700;min-height:2.6em;margin:4px 0}
.fleet{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:8px 0;font-size:.8rem}
.fleet span{background:#fff;border-radius:10px;padding:3px 8px}.fleet span.dead{text-decoration:line-through;opacity:.5}
.toast{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);background:var(--brown);color:#fff;padding:14px 18px;border-radius:18px;font-weight:800;text-align:center;max-width:90vw;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:pop .4s}
.overlay{position:fixed;inset:0;background:rgba(43,29,20,.6);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
.overlay[hidden],.toast[hidden],[hidden]{display:none!important}
.card{background:#fff;border-radius:18px;padding:14px;margin:12px 0;box-shadow:0 2px 0 #eadcc8}
.overlay .card{text-align:center;max-width:360px;width:100%}
.endEmoji{font-size:4rem}
.field{display:flex;flex-direction:column;font-size:.85rem;flex:1;min-width:120px}
.field input{font-size:1rem;padding:10px;border:2px solid #e2d3bf;border-radius:10px;width:100%}
.clock{font-size:clamp(3rem,18vw,5rem);font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.live{text-align:center;font-size:1.6rem;font-weight:800;color:#2f8f3a}
.sessions{list-style:none;padding:0;margin:0}
.sessions li{display:flex;justify-content:space-between;align-items:center;gap:6px;background:#fff;border-radius:12px;padding:8px 10px;margin:6px 0;font-size:.9rem}
.sessions li .acts{display:flex;gap:2px;flex-shrink:0}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:#fff;border-radius:16px;padding:12px;text-align:center;box-shadow:0 2px 0 #eadcc8}
.stat .k{font-size:.8rem;color:#6b5a4c}.stat .v{font-size:1.5rem;font-weight:800;color:#2f8f3a}.stat .s{font-size:.8rem}
#chart svg{width:100%;height:auto;display:block}
#sharePreview{width:100%;border-radius:12px;margin-top:8px}
footer{text-align:center;font-size:.8rem;color:#6b5a4c;padding:16px 12px 24px}

/* ---------- Wide / landscape layout (16:9 frames, desktop, phones held sideways) ---------- */
/* difficulty selector + record */
.diff{border:0;margin:6px auto;padding:0;max-width:560px}
.diff legend{font-weight:700;font-size:.85rem;color:#7b4a2a;text-align:center;width:100%;padding:0;margin-bottom:4px}
.diffopts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.diffbtn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border:2px solid #e3cfb4;border-radius:12px;background:#fff;color:#2b1d14;font:inherit;cursor:pointer;line-height:1.15}
.diffbtn .de{font-size:1.2rem}.diffbtn .dn{font-weight:700;font-size:.78rem}.diffbtn .dl{font-size:.68rem;color:#8a7766;text-transform:uppercase;letter-spacing:.04em}
.diffbtn.on{border-color:#7b4a2a;background:#fff3df;box-shadow:0 0 0 2px #f2c98a inset}
.diffdesc{min-height:1.2em;margin:4px 0 0}
.endrec{font-weight:700;color:#7b4a2a;margin:4px 0 10px}
.rec{width:100%;border-collapse:collapse;font-size:.85rem;text-align:center}
.rec th,.rec td{padding:3px 4px;border-bottom:1px solid #f0e4d4}
.rec tbody th{text-align:left;white-space:nowrap}
.rec thead th{font-size:.72rem;color:#8a7766;font-weight:600}
.rec tr[data-k=overall]{font-weight:700}
.record h3{margin:0 0 6px}
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (min-width: 640px) {
  :root{--hdr:46px;--ftr:18px;--avail:calc(100vh - var(--hdr) - var(--ftr) - 16px)}
  @supports (height:100dvh){:root{--avail:calc(100dvh - var(--hdr) - var(--ftr) - 16px)}}
  html,body{overflow:hidden;height:100%}
  body{min-height:0;height:100vh;height:100dvh}
  .top{display:flex;align-items:flex-end;gap:16px;padding:6px 12px 0;height:var(--hdr)}
  h1{margin:0 0 8px;font-size:1.35rem;white-space:nowrap;flex:none}
  nav{flex:1;max-width:520px;margin-left:auto}
  nav button{padding:8px 4px;font-size:.95rem}
  main{max-width:none;padding:8px 16px;height:calc(100% - var(--hdr) - var(--ftr));overflow:hidden}
  footer{height:var(--ftr);padding:0 12px;font-size:.7rem;line-height:var(--ftr)}
  .cell{font-size:calc(var(--bs) * .055)}
  .board{--bs:min(44vw, calc(var(--avail) - 8px));width:var(--bs);padding:4px;border-radius:10px;margin:0}
  /* setup: board left, controls right */
  #setup:not([hidden]){display:grid;grid-template-columns:auto minmax(220px,360px);grid-template-rows:auto auto auto 1fr;column-gap:24px;justify-content:center;align-items:start;height:100%}
  #placeBoard{grid-column:1;grid-row:1/5}
  #setup .lead,#setup .row,#placeHint,#btnStart{grid-column:2}
  #setup .lead{margin-top:8px}
  #btnStart{align-self:start}
  /* battle: enemy board left, own board right */
  #battle:not([hidden]){display:grid;grid-template-columns:auto auto;grid-template-areas:"st st" "l1 l2" "eb mb" "eb fl";grid-template-rows:auto auto auto 1fr;column-gap:28px;justify-content:center;align-content:start}
  #battle .status{grid-area:st;min-height:0;height:1.5em;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #battle .blabel{margin:0 0 4px;font-size:.95rem}
  #battle .blabel:nth-of-type(1){grid-area:l1}#battle .blabel:nth-of-type(2){grid-area:l2}
  #enemyBoard{grid-area:eb;--bs:min(50vw, calc(var(--avail) - 1.5em - 1.6em - 14px))}
  #enemyBoard,#myBoard{width:var(--bs)}
  #myBoard{grid-area:mb;align-self:start;--bs:min(34vw, calc((var(--avail) - 1.5em - 1.6em - 14px) * .7))}
  .small .cell{font-size:calc(var(--bs) * .05)}
  #fleetEnemy{grid-area:fl;margin:8px 0 0;align-self:start;align-content:flex-start;max-width:min(34vw, calc((var(--avail) - 1.5em - 1.6em - 14px) * .7));font-size:.75rem}
  #fleetEnemy span{padding:1px 6px}
  /* timer: clock left, form + sessions right */
  #timerMain:not([hidden]){display:grid;grid-template-columns:minmax(260px,420px) minmax(280px,460px);grid-template-rows:auto auto auto auto 1fr;column-gap:24px;justify-content:center;height:100%}
  #timerMain>.hint,#timerMain>.clock,#timerMain>.live,#btnTimer{grid-column:1}
  #timerMain>.card{grid-column:2;grid-row:1/3;margin:0}
  #timerMain>h3{grid-column:2;grid-row:3;margin:8px 0 4px}
  #sessions{grid-column:2;grid-row:4/6;overflow:auto;min-height:0}
  #timerMain>.hint{grid-row:1}#timerMain>.clock{grid-row:2}#timerMain>.live{grid-row:3}#btnTimer{grid-row:4;align-self:start}
  .clock{font-size:min(5rem,16vh)}
  .btn.huge{padding:min(24px,3vh);font-size:min(1.8rem,6vh)}
  .tab.on{height:100%;min-height:0}
  #timerMain:not([hidden]){min-height:0}
  #wageSetup{max-width:520px;margin:8px auto}
  /* stats: numbers left, chart + share right */
  #stats.on{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);grid-template-rows:auto 1fr;column-gap:20px;height:100%;max-width:1100px;margin:0 auto}
  #stats>h2{grid-column:1/3;margin:0 0 6px;font-size:1.15rem}
  #statCards{grid-column:1;align-content:start;overflow:auto;min-height:0}
  #stats>.card{grid-column:2;margin:0 0 8px}
  #stats>.card:last-child{min-height:0;overflow:auto}
  #stats .stat{padding:8px}#stats .stat .v{font-size:1.25rem}
  #stats .btn.big{margin:6px 0;padding:10px;font-size:1rem;white-space:nowrap}
  #chart svg{max-height:26vh}
  #stats>.card h3{margin:0 0 6px}
  #stats>.card:last-child>.row{margin:0}
  #stats>.card:last-child{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
  #stats>.card:last-child>.row,#btnShare{grid-column:1}
  #sharePreview{grid-column:2;grid-row:1/3;height:min(120px,22vh);width:auto;margin:0}
  #stats{grid-template-rows:auto auto 1fr}
  #statCards{grid-row:2/4}
  /* difficulty + record (landscape) */
  #setup:not([hidden]){grid-template-rows:auto auto auto auto auto 1fr}
  #placeBoard{grid-row:1/7}
  #difficulty{grid-column:2;margin:2px 0;width:100%}
  #setup .lead{font-size:.85rem;margin:4px 0}
  #setup .row{margin:4px 0}
  .diffbtn{padding:4px 2px}.diffbtn .de{font-size:1rem}
  #stats{grid-template-rows:auto auto 1fr}
  #statCards{grid-row:2}
  #stats>#recordCard{grid-column:1;grid-row:3;min-height:0;overflow:auto;margin:6px 0 0;padding:8px 10px;align-self:start}
  #recordCard h3{font-size:.95rem;margin:0 0 2px}
  .rec{font-size:.78rem}.rec th,.rec td{padding:1px 4px}
  #stats>.card:last-child{grid-row:3}
  #stats>#recordCard+.card{grid-row:2}
  #statCards{grid-template-columns:repeat(3,1fr);gap:6px}
  #stats .stat{padding:5px 4px}#stats .stat .k{font-size:.7rem}#stats .stat .s{font-size:.66rem}#stats .stat .v{font-size:1.1rem}
}

/* ================= Polish pass (v2) ================= */
:root{--cream:#fff8ec;--green:#2f8f3a;--radius:14px;--ease:cubic-bezier(.2,.8,.2,1);--font:"Nunito","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body,button,input{font-family:var(--font)}
h1,h2,h3,.title-name,.clock,.live,.stat .v{letter-spacing:.2px}
h2,h3{color:var(--brown)}
.top{box-shadow:0 2px 10px rgba(43,29,20,.25)}
.toprow{display:flex;align-items:center;justify-content:center;position:relative}
.iconbtn{position:absolute;right:0;top:50%;transform:translateY(-60%);min-width:44px;min-height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);font-size:1.25rem;cursor:pointer;transition:background .2s}
.iconbtn:hover{background:rgba(255,255,255,.3)}
nav button{min-height:44px;transition:background .2s,color .2s}
.btn{min-height:44px;transition:transform .12s var(--ease),box-shadow .12s,filter .2s}
.btn:hover{filter:brightness(1.04)}
.btn:focus-visible,.cell:focus-visible,nav button:focus-visible,.iconbtn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tab.on{animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cell{transition:transform .1s,background .2s}
#enemyBoard .cell:not(.hit):not(.miss):not(.sunk):hover{transform:scale(1.08);filter:brightness(.95)}
#enemyBoard .cell:not(.hit):not(.miss):not(.sunk):active{transform:scale(.9)}
.cell.hit{animation:splat .45s var(--ease)}
.cell.miss{animation:ripple .5s var(--ease)}
.cell.sunk{animation:sinkcell .6s var(--ease) both}
@keyframes splat{0%{transform:scale(.3) rotate(-15deg)}50%{transform:scale(1.35,0.85)}75%{transform:scale(.92,1.08)}100%{transform:scale(1)}}
@keyframes ripple{0%{transform:scale(.5);box-shadow:0 0 0 0 rgba(58,160,216,.7)}100%{transform:scale(1);box-shadow:0 0 0 10px rgba(58,160,216,0)}}
@keyframes sinkcell{0%{transform:scale(1)}40%{transform:scale(1.2) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
.board.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.status{transition:color .2s}
/* particles */
.fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.pt{position:fixed;width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px;animation:fly .6s var(--ease) forwards}
.pt.hit{background:#7b4a2a;width:10px;height:10px}
.pt.miss{background:#5bc0eb}
@keyframes fly{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.conf{position:fixed;top:-40px;font-size:26px;font-style:normal;animation:fall 2.5s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
/* toast + overlays */
.toast{animation:toastIn .35s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-30%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.overlay{animation:fadeIn .25s ease;backdrop-filter:blur(3px)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pop-in{animation:popIn .45s var(--ease)}
@keyframes popIn{0%{transform:scale(.6) translateY(30px);opacity:0}70%{transform:scale(1.04)}100%{transform:none;opacity:1}}
#endScreen .card{border-top:8px solid var(--accent)}
#endScreen.lose .card{border-top-color:#9a6a44}
.endEmoji{animation:bounce 1.2s ease-in-out infinite}
#endScreen.lose .endEmoji{animation:wobble 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
#endTitle{font-size:1.6rem;margin:6px 0}
/* title screen */
.title-screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 30%,#a8703f 0%,#7b4a2a 55%,#4a2b17 100%);color:#fff;text-align:center;transition:opacity .4s,transform .4s var(--ease)}
.title-screen.gone{opacity:0;transform:scale(1.08);pointer-events:none}
.title-inner{max-width:420px;width:100%}
.title-logo{font-size:min(30vw,140px);line-height:1;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.bob{display:inline-block;animation:bounce 1.6s ease-in-out infinite}
.title-name{font-size:clamp(2.2rem,11vw,3.4rem);margin:10px 0 0;color:#fff;font-weight:900;text-shadow:0 4px 0 #3b2212}
.title-sub{display:inline-block;margin:6px 0 10px;padding:4px 14px;border-radius:999px;background:var(--accent);color:#3b2212;font-weight:900;letter-spacing:3px;font-size:.95rem;transform:rotate(-3deg)}
.title-tag{opacity:.9;margin:6px 0 18px}
.title-screen .btn.big{font-size:1.35rem;padding:16px}
.title-screen .btn.ghost{color:#fff;width:100%}
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 3px 0 #b8860b,0 0 0 0 rgba(255,207,63,.7)}50%{box-shadow:0 3px 0 #b8860b,0 0 0 12px rgba(255,207,63,0)}}
/* donate */
.donate{display:inline-block;margin:0 0 8px;padding:10px 16px;min-height:44px;border-radius:999px;background:#fff;color:var(--brown);font-weight:800;text-decoration:none;box-shadow:0 3px 0 #d8c3a8}
.donate:active{transform:translateY(2px)}
#donateModal .card{text-align:center;max-width:340px;width:100%}
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (min-width: 640px){
  .toprow{flex:none}.iconbtn{position:static;transform:none;margin:0 0 8px 8px;min-width:36px;min-height:36px;font-size:1rem}
  footer{display:flex;justify-content:center;align-items:center;gap:12px}
  .donate{margin:0;padding:0 10px;min-height:0;line-height:var(--ftr);font-size:.7rem;box-shadow:none}
  .title-logo{font-size:min(18vh,120px)}
  :root{--ftr:24px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* device-only storage notice */
.devnote-short{display:block;font-size:.72rem;font-weight:600;color:#8a7766;margin-top:2px}
.devnote{font-size:.75rem;line-height:1.4;color:#8a7766;margin:8px 0 0;padding:6px 8px;background:#fff8ec;border-radius:10px}
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (min-width: 640px){
  .devnote-short{display:inline;margin-left:8px}
  .devnote{font-size:.68rem;margin-top:4px;padding:4px 6px}
}

/* title wallpaper (v3): light background + emoji pattern so the brown 💩 pops */
.title-screen{background:radial-gradient(circle at 50% 35%,#f4fff8 0%,#d8f3e6 60%,#bfe8d4 100%);color:var(--ink);overflow:hidden}
.title-screen::before{content:"";position:absolute;inset:-180px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Ctext%20x%3D%2215%22%20y%3D%2225%22%20font-size%3D%2222%22%20transform%3D%22rotate%28-15%2015%2025%29%22%3E%F0%9F%AA%A0%3C/text%3E%3Ctext%20x%3D%2275%22%20y%3D%2220%22%20font-size%3D%2222%22%20transform%3D%22rotate%2810%2075%2020%29%22%3E%F0%9F%9A%BD%3C/text%3E%3Ctext%20x%3D%22130%22%20y%3D%2240%22%20font-size%3D%2222%22%20transform%3D%22rotate%28-20%20130%2040%29%22%3E%F0%9F%92%B5%3C/text%3E%3Ctext%20x%3D%2235%22%20y%3D%2285%22%20font-size%3D%2222%22%20transform%3D%22rotate%2820%2035%2085%29%22%3E%F0%9F%A7%BB%3C/text%3E%3Ctext%20x%3D%22100%22%20y%3D%2295%22%20font-size%3D%2222%22%20transform%3D%22rotate%28-8%20100%2095%29%22%3E%F0%9F%92%B0%3C/text%3E%3Ctext%20x%3D%22160%22%20y%3D%22100%22%20font-size%3D%2222%22%20transform%3D%22rotate%2815%20160%20100%29%22%3E%F0%9F%92%B8%3C/text%3E%3Ctext%20x%3D%2210%22%20y%3D%22150%22%20font-size%3D%2222%22%20transform%3D%22rotate%28-10%2010%20150%29%22%3E%F0%9F%9A%BD%3C/text%3E%3Ctext%20x%3D%2270%22%20y%3D%22155%22%20font-size%3D%2222%22%20transform%3D%22rotate%2825%2070%20155%29%22%3E%F0%9F%AA%A0%3C/text%3E%3Ctext%20x%3D%22140%22%20y%3D%22165%22%20font-size%3D%2222%22%20transform%3D%22rotate%285%20140%20165%29%22%3E%F0%9F%92%B5%3C/text%3E%3C/svg%3E");background-size:180px 180px;opacity:.22;transform:rotate(-8deg);animation:drift 60s linear infinite;pointer-events:none}
@keyframes drift{from{background-position:0 0}to{background-position:180px 360px}}
.title-inner{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(2px);border-radius:28px;padding:22px 18px;box-shadow:0 10px 30px rgba(43,90,60,.18)}
.title-name{color:var(--brown);text-shadow:0 3px 0 #f2d9b8}
.title-tag{color:#3b2a1e;opacity:1}
.title-screen .btn.ghost{color:var(--brown)}
.title-logo{filter:drop-shadow(0 10px 10px rgba(43,29,20,.3))}
@media (prefers-reduced-motion: reduce){.title-screen::before{animation:none}}