@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&display=swap');

:root {
  --ink:#21150d;
  --brown:#643015;
  --orange:#e85813;
  --gold:#edae35;
  --paper:#f6ddb0;
  --cream:#fff1d0;
  --green:#315c37;
  --paper-image:url('ordknuff-board-paper-v2.png');
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100svh;
  color:var(--ink);
  background:#e85813 url('ordknuff-orange-paper-texture.png') center / cover fixed;
}
body, body * { font-family:'Jost','Century Gothic',Arial,sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.hidden { display:none !important; }
.loading-screen { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden; background:#e85813 url('ordknuff-orange-paper-texture.png') center/cover; transition:opacity .55s ease,visibility .55s ease; }
.loading-screen img { width:min(74vw,380px); height:auto; object-fit:contain; animation:loading-logo-depth 2.8s ease-in-out infinite; transform-origin:50% 55%; }
.loading-screen::after { content:''; position:absolute; top:calc(50% + min(17vw,88px)); left:50%; width:min(40vw,205px); height:20px; border-radius:50%; background:#4c210e88; filter:blur(12px); transform:translateX(-50%); animation:loading-shadow-depth 2.8s ease-in-out infinite; }
.loading-screen.ready { opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loading-logo-depth { 0%,100%{transform:perspective(700px) translateZ(-45px) scale(.9) rotateX(5deg);filter:drop-shadow(0 9px 5px #51230d55)} 50%{transform:perspective(700px) translateZ(45px) scale(1.07) rotateX(-2deg);filter:drop-shadow(0 26px 13px #51230d8c)} }
@keyframes loading-shadow-depth { 0%,100%{opacity:.45;transform:translateX(-50%) scale(.72);filter:blur(8px)} 50%{opacity:.9;transform:translateX(-50%) scale(1.16);filter:blur(15px)} }
@media(prefers-reduced-motion:reduce){.loading-screen img,.loading-screen::after{animation:none}}
body:has(#fair-play[open]) { overflow:hidden; }
body:has(#game-result[open]) { overflow:hidden; }
.game-result { width:min(390px,calc(100% - 32px)); padding:0; border:2px solid #e7bc66; border-radius:26px; color:var(--ink); background:var(--paper) var(--paper-image) center/cover; box-shadow:0 9px 0 #74391a,0 28px 80px #24100699,inset 0 0 0 4px #fff4d4; overflow:visible; }
.game-result::backdrop { background:#241006b8; backdrop-filter:blur(5px); }
.game-result-card { display:grid; justify-items:center; gap:7px; padding:30px 24px 27px; text-align:center; }
.game-result-star { color:#d89424; font-size:43px; line-height:1; text-shadow:0 2px #fff1c9; }
.game-result-kicker { margin:0; color:#76502f; font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.game-result-card h2 { margin:0 0 9px; color:#315c37; font-size:clamp(34px,10vw,46px); font-weight:900; line-height:1.05; text-shadow:0 2px #fff6dc; }
.game-result-card button { width:min(250px,100%); min-height:54px; font-size:19px; }
.fair-play { width:min(440px,calc(100% - 24px)); max-height:calc(100svh - 28px); padding:0; border:2px solid #ffebbb; border-radius:24px; color:var(--ink); background:var(--paper) var(--paper-image) center / cover; box-shadow:0 8px 0 #8b471f,0 22px 65px #421a0b80; overflow:auto; overscroll-behavior:contain; }
.fair-play::backdrop { background:#623018aa; backdrop-filter:blur(7px); }
.fair-play-card { padding:25px 25px 16px; text-align:center; }
.fair-play-logo { display:block; width:min(235px,80%); height:auto; margin:12px auto 16px; filter:drop-shadow(0 5px 3px #54271355); }
.fair-play-kicker { margin:0; color:var(--brown); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.fair-play-emblem { display:flex; justify-content:center; gap:5px; margin:22px 0 16px; }
.fair-play-emblem img { width:49px; height:49px; object-fit:contain; filter:drop-shadow(0 4px 2px #67361440); transform:rotate(-11deg); }
.fair-play-emblem img:nth-child(2) { transform:translateY(-7px) rotate(3deg); }
.fair-play-emblem img:nth-child(3) { transform:rotate(12deg); }
.fair-play h2 { margin:0; font-size:clamp(32px,9vw,43px); line-height:1.02; font-weight:900; letter-spacing:-.035em; color:#315c37; }
.fair-play-intro { margin:16px auto 12px; max-width:32ch; font-size:15px; line-height:1.4; }
.fair-play-motto { margin:0 0 19px; font-size:13px; font-weight:800; line-height:1.5; color:#76401d; }
.fair-play-rules { padding:15px 14px 12px; text-align:left; border:1px dashed #a47b47; border-radius:13px; background:#fff5dc66; }
.fair-play-rules h3 { margin:0 0 12px; color:#65421d; font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.fair-play-rules ol { display:grid; gap:13px; list-style:none; padding:0; margin:0; }
.fair-play-rules li { display:grid; grid-template-columns:25px minmax(0,1fr); gap:10px; align-items:start; }
.fair-play-rules li > span { display:grid; place-items:center; width:25px; height:25px; border:1px solid #b18a4b; border-radius:7px; background:#f1d8a2; color:#68401b; font-size:13px; font-weight:900; box-shadow:0 2px 0 #af8851; }
.fair-play-rules li strong { display:block; font-size:13px; line-height:1.3; }
.fair-play-rules li p { margin:3px 0 0; font-size:12px; line-height:1.4; }
.fair-play-note { margin:13px 0 0; padding-top:10px; border-top:1px solid #b38d4d55; color:#725532; font-size:11px; line-height:1.4; }
.fair-play #accept-fair-play { width:100%; margin-top:18px; padding:14px 10px; font-size:15px; }
.fair-play-signoff { margin:13px 0 0; color:#765830; font-size:11px; font-weight:600; }
.setup-links { flex-wrap:wrap; }
@media(max-height:730px) { .fair-play-card{padding:18px 20px 13px}.fair-play-emblem{margin:16px 0 12px}.fair-play-emblem img{width:38px;height:38px}.fair-play h2{font-size:33px}.fair-play-intro{margin-top:12px}.fair-play-rules ol{gap:10px} }
.app-shell { --shell-inset:13px; width:min(100%,460px); margin:auto; padding:calc(16px + env(safe-area-inset-top)) var(--shell-inset) calc(28px + env(safe-area-inset-bottom)); }

/* Den tidigare bildlogotypen återanvänds med Jost i gränssnittet. */
.topbar { text-align:center; padding:9px 0 15px; }
h1 { margin:0; line-height:1; }
.logo { display:block; width:min(100%,360px); height:auto; margin:auto; filter:drop-shadow(0 4px 2px #54271366); }
.brand-tagline { margin:9px 0 0; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.center-mark {
  display:block; background:#f3a39b;
  clip-path:polygon(50% 0,60% 29%,85% 15%,72% 40%,100% 50%,72% 60%,85% 85%,60% 72%,50% 100%,40% 72%,15% 85%,28% 60%,0 50%,28% 40%,15% 15%,40% 29%);
}
.war-mode .war-center-cell:not(.occupied) { background:#71884422; }
.war-mode .center-mark { place-self:center; width:54%; height:54%; background:none; clip-path:none; object-fit:contain; filter:drop-shadow(0 1px 1px #28422277); }
.war-mode .tile.war-special-tile { animation:war-special-glow 15s ease-in-out infinite; }
.war-mode .tile.war-special-tile::after { border-color:#d5b94d; background:linear-gradient(110deg,transparent 20%,#fff8d83b 40%,#fff3aa66 49%,#fff8d844 55%,transparent 74%),linear-gradient(145deg,#ffffff4d,#ffffff14 24%,transparent 42%,transparent 76%,#4d301c1a); background-size:220% 100%,100% 100%; background-position:-120% 0,0 0; box-shadow:inset 0 0 2px #fff0a077,0 0 2px 1px #e6c95166; animation:war-special-shimmer 15s ease-in-out infinite; }
@keyframes war-special-glow { 0%,100%{filter:drop-shadow(0 1px 1px #341d0f61) drop-shadow(0 0 1px #d4b95066)} 50%{filter:brightness(1.04) drop-shadow(0 1px 1px #341d0f61) drop-shadow(0 0 4px #f2ce5c99)} }
@keyframes war-special-shimmer { 0%,12%{background-position:-120% 0,0 0;box-shadow:inset 0 0 2px #fff0a077,0 0 2px 1px #e6c95166} 58%,78%{background-position:120% 0,0 0;box-shadow:inset 0 0 3px #fff5bd99,0 0 5px 1px #ffd84c99} 100%{background-position:120% 0,0 0;box-shadow:inset 0 0 2px #fff0a077,0 0 2px 1px #e6c95166} }
.paper-card, .score-card {
  background:var(--paper) var(--paper-image) center / cover;
  border:1px solid #ffe8bc;
  border-radius:15px;
}
.setup-card { position:relative; margin:10px 4px 40px; padding:22px 18px 51px; text-align:center; box-shadow:0 3px 5px #70330b35; }
.setup-card h2 { margin:0; font-size:25px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.lead { margin:3px 0 17px; font-size:15px; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.offline-entry { display:block; margin:23px auto 0; padding:3px 0; border:0; border-radius:0; background:none; box-shadow:none; color:#111; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-transform:none; }
.offline-entry:hover { color:#43200e; filter:none; }
.offline-setup { margin-top:18px; padding-top:15px; border-top:1px dashed #9a703c99; }
.offline-setup h3 { margin:0 0 10px; color:var(--brown); font-size:14px; }
.offline-back { margin:0 0 12px; padding:3px 0; border:0; border-radius:0; background:none; box-shadow:none; color:#111; font-size:11px; text-decoration:underline; text-transform:none; }
.offline-mode-buttons { margin-top:13px; }
.offline-mode-buttons button { min-height:45px; font-size:16px; }
label { font-size:12px; font-weight:700; color:var(--brown); }
input { display:block; width:100%; min-width:0; margin-top:4px; padding:10px; border:1px solid #aa794a; border-radius:8px; color:var(--ink); background:#fff3d7a6; box-shadow:inset 0 2px 3px #70330b18; font-size:16px; }
button {
  position:relative; border:1px solid #be955d; border-radius:14px; padding:10px 14px;
  background:linear-gradient(#fff1d242,#e3bb7933),var(--paper-image) center / cover;
  color:var(--ink); font-weight:800; text-transform:uppercase; line-height:1.12;
  box-shadow:inset 0 0 0 2px #fff0d4b3,inset 0 -3px 2px #98632940,0 3px 0 #845321,0 5px 5px #57270966;
  transition:transform .12s,filter .12s;
}
button:hover { filter:brightness(1.045); }
button:active { transform:translateY(2px); box-shadow:inset 0 0 0 2px #fff0d47d,0 1px 0 #845321,0 2px 3px #57270955; }
.primary { color:var(--cream); background:linear-gradient(#28552ee8,#28552ee8),var(--paper-image) center / cover; border:3px solid #f6d49a; box-shadow:inset 0 0 0 1px #fff0ce80,0 3px 0 #774b20,0 5px 5px #57270966; }
.mode-buttons { display:grid; gap:11px; margin-top:20px; }
.mode-choice { text-align:center; }
.mode-buttons button { position:relative; display:grid; place-items:center; width:90%; min-height:56px; margin:0 auto; padding:8px 54px; border-radius:16px; font-size:20px; letter-spacing:.015em; background:linear-gradient(#fffdf5,#f7ebd1),var(--paper-image) center / cover; }
.mode-buttons button > span { grid-area:1 / 1; }
.mode-tile,.mode-tank { position:absolute; z-index:1; left:13px; top:50%; width:36px; height:36px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 2px 1px #60301555); }
.mode-tile { transition:transform .18s ease; }
.normal-tile { transform:translateY(-50%) rotate(-12deg); }
.fast-tile { transform:translateY(-50%) rotate(11deg); }
.mode-tank { width:51px; height:44px; transform:translateY(-50%) rotate(-3deg); }
.wordlist-status { margin:12px 0 0; color:#5a4024; font-size:12px; font-weight:700; }
.wordlist-status.error { color:#9c2a20; }
.mode-choice button:disabled { opacity:.62; cursor:progress; }
.button-detail { margin:4px 0 0; font-size:10px; font-weight:500; text-transform:none; letter-spacing:.04em; }
.welcome-tiles { position:absolute; bottom:-34px; left:0; right:0; display:flex; justify-content:center; gap:4px; pointer-events:none; }
.welcome-tiles img { width:61px; height:61px; object-fit:contain; filter:drop-shadow(0 5px 3px #60301566); transform-origin:50% 100%; }
.welcome-tiles img:first-child { --dance-tilt:-9deg; --dance-counter-tilt:3deg; --dance-lift:-9px; --dance-settle:-2px; transform:translateY(-5px) rotate(-14deg); }
.welcome-tiles img:nth-child(2) { --dance-tilt:7deg; --dance-counter-tilt:-2deg; --dance-lift:-12px; --dance-settle:-3px; transform:translateY(5px) rotate(2deg); }
.welcome-tiles img:last-child { --dance-tilt:11deg; --dance-counter-tilt:-4deg; --dance-lift:-8px; --dance-settle:-2px; transform:translateY(-5px) rotate(13deg); }
body.menu-music-playing .welcome-tiles img { animation:welcome-tile-dance 500ms cubic-bezier(.35,.02,.58,1) infinite; will-change:transform; }
@keyframes welcome-tile-dance {
  0%,100% { transform:translateY(0) rotate(0deg); }
  34% { transform:translateY(var(--dance-lift)) rotate(var(--dance-tilt)); }
  67% { transform:translateY(var(--dance-settle)) rotate(var(--dance-counter-tilt)); }
}
@media(prefers-reduced-motion:reduce) { body.menu-music-playing .welcome-tiles img { animation:none; will-change:auto; } }

/* Spelvyn: poängkort, tur/klocka, bräde, hållare och tre kontroller. */
.score-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.war-summary { display:grid; grid-template-columns:minmax(0,1fr) 1px 80px 1px minmax(0,1fr); align-items:center; gap:8px; min-height:102px; margin-bottom:12px; padding:13px 10px 8px; border:2px solid #a66d32; border-radius:18px; background:linear-gradient(140deg,#fff1cfdd,#f5d99fe8),var(--paper-image) center / cover; box-shadow:inset 0 0 0 2px #fff5d8,0 3px 0 #713a1d,0 5px 6px #57270955; position:relative; overflow:hidden; }
.war-summary::before { content:''; position:absolute; inset:5px; border:1px dashed #9a703c70; border-radius:13px; pointer-events:none; }
.war-player { display:grid; grid-template-columns:34px minmax(0,1fr) 46px; align-items:center; gap:6px; min-width:0; position:relative; z-index:1; }
.war-player.red { grid-template-columns:46px minmax(0,1fr) 34px; }
.war-divider { display:block; position:relative; z-index:1; justify-self:center; width:1px; height:64px; border-left:1px dashed #8f693f9c; }
.war-laurel { position:absolute; z-index:2; left:50%; top:4px; width:74px; height:21px; object-fit:contain; transform:translateX(-50%); pointer-events:none; }
.war-player-data { display:grid; gap:1px; min-width:0; line-height:1.1; font-variant-numeric:tabular-nums; }
.war-player-data b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(10px,2.8vw,14px); font-weight:900; letter-spacing:.01em; }
.war-player-data span { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:clip; font-size:clamp(11px,2.8vw,14px); font-weight:800; }
.war-player-data span.long-share { font-size:clamp(9px,2.35vw,12px); letter-spacing:-.035em; }
.war-player.green { color:#1d6538; }
.war-player.red { color:#a52e29; }
.war-rank { display:block; width:34px; height:42px; object-fit:contain; filter:drop-shadow(0 2px 1px #55351f88); }
.war-delta { position:relative; display:grid; flex:0 0 46px; width:46px; height:31px; place-items:center; color:#fff0c9; font-size:17px; line-height:1; font-style:normal; font-weight:900; font-variant-numeric:tabular-nums; }
.war-delta img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; }
.war-delta span { position:relative; z-index:1; }
.war-pie { --green-share:50%; position:relative; z-index:1; display:block; justify-self:center; flex:0 0 78px; width:78px; height:78px; margin-top:10px; border:3px solid #774c27; border-radius:50%; background:conic-gradient(from 120deg,#24693b 0 var(--green-share),#bd3e32 var(--green-share) 100%); box-shadow:inset 0 0 0 2px #f5d38b,0 2px 0 #70431f,0 3px 4px #57270955; }
.war-pie.empty { background:conic-gradient(from 120deg,#728650 0 50%,#ae5a4d 50% 100%); }
.war-pie-share { position:absolute; left:var(--label-x); top:var(--label-y); transform:translate(-50%,-50%); color:#fff3d4; font-size:11px; line-height:1; font-weight:900; text-shadow:0 1px 2px #24180dcc; font-variant-numeric:tabular-nums; }
.war-pie-share.green { --label-x:var(--green-label-x,28%); --label-y:var(--green-label-y,70%); }
.war-pie-share.red { --label-x:var(--red-label-x,78%); --label-y:var(--red-label-y,35%); }
.war-pie-star { position:absolute; top:50%; left:50%; display:grid; width:23px; height:23px; place-items:center; transform:translate(-50%,-50%); border:1px solid #7b572c; border-radius:50%; background:#e6c274; color:#315c37; box-shadow:0 1px 3px #3e281e99; font-size:17px; line-height:1; }
.game-view.war-mode .turn-label { background:linear-gradient(#176b37ed,#176b37ed),var(--paper-image) center / cover; }
.game-view.war-mode.current-red .turn-label { background:linear-gradient(#b72d29ed,#b72d29ed),var(--paper-image) center / cover; }
.game-view.war-mode.current-green .turn-label { border:2px solid #e4bd64; background:linear-gradient(#365d38,#365d38),var(--paper-image) center / cover; box-shadow:inset 0 0 0 1px #a7c478,0 2px 0 #263d2a,0 3px 4px #45291655; }
.game-view.war-mode.current-red .turn-label { border:2px solid #e4bd64; background:linear-gradient(#a6382d,#a6382d),var(--paper-image) center / cover; box-shadow:inset 0 0 0 1px #f3b38b,0 2px 0 #54271e,0 3px 4px #45291655; }
.score-card { min-width:0; display:flex; align-items:center; gap:12px; min-height:58px; padding:7px 15px; border-radius:12px; box-shadow:0 3px 0 #803b19,0 4px 5px #57270966; }
.player-score { min-width:0; display:flex; flex-direction:column; line-height:1.08; }
.player-score > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; font-weight:700; }
.player-score b { font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; }
.player-symbol { position:relative; flex:0 0 30px; width:30px; height:36px; color:#806141; }
.player-symbol::before { content:''; position:absolute; top:1px; left:8px; width:16px; height:17px; border-radius:50%; background:currentColor; box-shadow:0 1px 0 #fff0c875; }
.player-symbol::after { content:''; position:absolute; left:2px; bottom:0; width:28px; height:17px; border-radius:50% 50% 35% 35%; background:currentColor; box-shadow:0 1px 0 #fff0c875; }
#score-1 .player-symbol { color:#bd4d16; }
.game-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; height:59px; min-height:59px; padding:6px 8px; margin-bottom:12px; }
.turn-label { min-width:0; display:flex; align-items:center; justify-content:center; min-height:44px; padding:5px 8px; border-radius:15px; background:linear-gradient(#295c34e8,#295c34e8),var(--paper-image) center / cover; color:#fff1cf; font-size:clamp(18px,5.8vw,27px); font-weight:800; line-height:1.08; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:clip; text-align:center; box-shadow:inset 0 1px 0 #193f27,0 1px 0 #fff2c5; }
.clock { display:grid; grid-template-columns:24px 78px; align-items:center; justify-items:center; gap:7px; padding-left:14px; border-left:1px solid #76522e; }
.clock-icon { flex:0 0 24px; width:24px; height:28px; fill:none; stroke:currentColor; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }
.timer { position:relative; top:2px; display:flex; align-items:center; justify-content:center; width:78px; height:36px; font-family:Arial,sans-serif; font-size:28px; line-height:1; font-weight:800; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; letter-spacing:0; transform:none; }
.timer.timer-critical { color:#c62f20; }
.board-wrap { padding:4px; background:#783a1d; border:1px solid #6b2a10; border-radius:13px; box-shadow:inset 0 0 0 1px #ba6b35,0 2px 0 #ffb04466; }
.board-viewport { position:relative; width:100%; aspect-ratio:1; overflow:auto; border:1px solid #4a2514; border-radius:7px; background:var(--paper) var(--paper-image) center/cover; touch-action:none; overscroll-behavior:contain; scrollbar-width:none; }
.board-viewport::-webkit-scrollbar { display:none; }
.war-effects { position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none; }
.board {
  position:relative; display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); grid-template-rows:repeat(13,minmax(0,1fr));
  width:100%; height:100%; gap:0; padding:0; overflow:hidden; perspective:850px;
  background:var(--paper) var(--paper-image) center / 100% 100% no-repeat;
}
.cell { position:relative; min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; background:#f7dfac08; box-shadow:inset -1px -1px 0 #674323b3,inset 1px 1px 0 #fff0c966; transition:background-color .18s ease,box-shadow .18s ease; }
.cell.owner-green { background-color:#4a9f60; box-shadow:inset 0 0 0 2px #146a31,inset 0 0 0 3px #c4e8b1; }
.cell.owner-red { background-color:#c85b51; box-shadow:inset 0 0 0 2px #922b28,inset 0 0 0 3px #f2b0a0; }
.war-mode .cell.war-cake-cell:not(.occupied) { background-color:#f8dfaa; }
.war-cake-mark { position:absolute; inset:3%; z-index:1; pointer-events:none; background-image:url('assets/ui/cake-bonus-sprite.png'); background-size:200% 200%; background-repeat:no-repeat; filter:drop-shadow(0 1px 1px #53321866); }
.war-cake-0 .war-cake-mark { background-position:0 0; }
.war-cake-1 .war-cake-mark { background-position:100% 0; }
.war-cake-2 .war-cake-mark { background-position:0 100%; }
.war-cake-3 .war-cake-mark { background-position:100% 100%; }
.cell.war-claiming { animation:war-claim .24s ease-out; }
@keyframes war-claim { 0%{filter:brightness(1.7);transform:scale(.94)} 100%{filter:none;transform:scale(1)} }
.cell.war-glow-green { animation:war-glow-green .85s ease-in-out 1s both; }
.cell.war-glow-red { animation:war-glow-red .85s ease-in-out 1s both; }
.cell.war-glow-blue { animation:war-glow-blue .85s ease-in-out 1s both; }
.cell.war-spark-active .tile { animation:war-tile-crackle .16s steps(2,end) infinite; }
.cell.war-gold-active { z-index:3; animation:war-gold-cell 1s ease-in-out both; }
.cell.war-gold-spark-active::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 50%,#fff8b8 0,#ffd84a9c 32%,#c8761266 70%,transparent 100%); animation:war-gold-flash .22s steps(2,end) 4; }
.cell.war-gold-spark-active .tile { animation:war-gold-tile 1s ease-in-out both,war-tile-crackle .16s steps(2,end) 6; }
.cell.war-gold-active .tile::after { border-color:#fff0a0; box-shadow:inset 0 0 0 2px #fff8c8,0 0 11px 5px #ffbf32; }
.cell.war-smoke-active::before { content:''; position:absolute; inset:-22%; z-index:3; pointer-events:none; background:radial-gradient(ellipse at 45% 80%,#554c3dbb 0, #8b796b88 27%,#b4a79744 52%,transparent 74%); filter:blur(3px); animation:war-smoke-rise 1.35s ease-out both; }
.war-crater-art { position:absolute; z-index:1; pointer-events:none; }
.war-crater-art img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 2px #24180f80); }
.war-crater-art.war-crater-smoking::after { content:''; position:absolute; inset:4% 9%; pointer-events:none; background:radial-gradient(ellipse at 48% 55%,#625c50aa 0,#8d857688 28%,#a59b8a40 49%,transparent 70%); filter:blur(4px); animation:war-crater-smoke 2.15s ease-in-out infinite; }
.war-explosion { position:absolute; z-index:9; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(ellipse at 50% 53%,#fffce3 0 5%,#fff7ad 8%,#ffd13c 17%,#fb6c18 29%,#c3290dcf 42%,#50301c66 55%,transparent 70%); filter:blur(1px) saturate(1.5); animation:war-explosion-bloom 1.08s cubic-bezier(.12,.72,.2,1) var(--blast-delay,0ms) both; }
.war-explosion::before,.war-explosion::after { content:''; position:absolute; inset:7%; border-radius:50%; background:conic-gradient(from 12deg,transparent 0 7%,#ffef9c 8% 10%,transparent 12% 22%,#ff9638 24% 27%,transparent 30% 43%,#fff0a8 45% 47%,transparent 49% 62%,#ff7a27 64% 68%,transparent 70% 83%,#ffe18b 85% 87%,transparent 90%); filter:blur(1px); animation:war-explosion-ring .82s ease-out var(--blast-delay,0ms) both; }
.war-explosion::after { inset:22%; background:radial-gradient(circle at 50% 48%,#fff 0 5%,#fff6b9 8%,#ffb62c 25%,#e54514cc 48%,transparent 72%); filter:blur(3px); animation:war-explosion-core .7s ease-out var(--blast-delay,0ms) both; }
.war-flight-tile { position:absolute !important; z-index:12 !important; margin:0 !important; max-width:none !important; flex:none !important; pointer-events:none !important; animation:war-tile-flight .92s cubic-bezier(.13,.68,.18,1) var(--fly-delay,0ms) both; }
@keyframes war-glow-green { 0%,100%{filter:none} 24%,64%{filter:brightness(1.65);box-shadow:inset 0 0 0 3px #d4ffb0,0 0 13px 5px #55ed70} }
@keyframes war-glow-red { 0%,100%{filter:none} 24%,64%{filter:brightness(1.7);box-shadow:inset 0 0 0 3px #ffe0ab,0 0 14px 6px #ff2929} }
@keyframes war-glow-blue { 0%,100%{filter:none} 24%,64%{filter:brightness(1.8);box-shadow:inset 0 0 0 3px #dcf5ff,0 0 15px 6px #378cff} }
@keyframes war-tile-crackle { 0%,100%{filter:brightness(1.35) contrast(1.2)} 50%{filter:brightness(1.7) contrast(1.4)} }
@keyframes war-gold-cell { 0%{filter:brightness(1)} 15%,55%{filter:brightness(1.85) sepia(.85) saturate(2.6);box-shadow:inset 0 0 0 2px #fff2a1,0 0 16px 7px #ffc928} 100%{filter:brightness(1)} }
@keyframes war-gold-tile { 0%{filter:none} 18%,62%{filter:sepia(.9) saturate(3) brightness(1.38) drop-shadow(0 0 8px #ffd43b)} 100%{filter:none} }
@keyframes war-gold-flash { 0%,100%{opacity:.22} 50%{opacity:.9} }
@keyframes war-smoke-rise { 0%{opacity:0;transform:translateY(8%) scale(.7)} 25%{opacity:.72} 100%{opacity:0;transform:translateY(-24%) scale(1.3)} }
@keyframes war-crater-smoke { 0%,100%{opacity:.4;transform:translateY(8%) scale(.78)} 48%{opacity:.88;transform:translateY(-18%) scale(1.17)} }
@keyframes war-explosion-bloom { 0%{opacity:0;transform:scale(.05)} 12%{opacity:1;transform:scale(.52)} 38%{opacity:.96;transform:scale(1.16)} 72%{opacity:.58;transform:scale(1.38)} 100%{opacity:0;transform:scale(1.62)} }
@keyframes war-explosion-ring { 0%{opacity:0;transform:scale(.08) rotate(0)} 18%{opacity:1} 100%{opacity:0;transform:scale(1.52) rotate(90deg)} }
@keyframes war-explosion-core { 0%,100%{opacity:0;transform:scale(.15)} 16%{opacity:1;transform:scale(.8)} 42%{opacity:.86;transform:scale(1.05)} 100%{opacity:0;transform:scale(1.5)} }
@keyframes war-tile-flight { 0%{opacity:1;transform:translate(0,0) rotate(0) scale(1);filter:drop-shadow(0 1px 2px #1d100a)} 24%{opacity:1;transform:translate(0,-34px) rotate(120deg) scale(1.16);filter:drop-shadow(0 8px 5px #1d100a88)} 100%{opacity:var(--fly-opacity,0);transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--fly-rot)) scale(.78);filter:drop-shadow(0 0 0 transparent)} }
.cell.dw { background-color:#f4b019cf; }
.cell.dl { background-color:#eb6a08d9; }
.cell.tl { background-color:#d8450be0; }
.cell.center { background-color:#60331ce6; }
.center-mark { width:77%; height:77%; color:transparent; font-size:0; }
.cell.center.occupied .center-mark { display:none; }
.rack-area { margin-top:13px; }
.rack {
  position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:4px;
  min-height:60px; padding:6px 7px 8px;
  border:2px solid #efbc62; border-radius:20px;
  background:linear-gradient(#713315db,#773415db),var(--paper-image) center / cover;
  box-shadow:inset 0 5px 9px #461d0b66,inset 0 -2px 3px #3e1b0d40,0 2px 0 #a64a15;
}
.game-view.war-mode .rack { border-color:#b5a66b; background:linear-gradient(#61563855,#4f432f62),url('assets/ui/war-camouflage-paper.png') center / cover; box-shadow:inset 0 5px 9px #352c1d66,inset 0 -2px 3px #251d1240,0 2px 0 #8b7442; }
.rack.drag-over { outline:3px dashed var(--gold); outline-offset:3px; }
.tile { display:block; position:relative; width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:1; border:0; background:none; transform:rotate(var(--tilt)); z-index:2; user-select:none; touch-action:none; cursor:grab; filter:drop-shadow(0 1px 1px #341d0f61); }
.tile-face { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.tile::after { content:''; position:absolute; inset:1px; z-index:1; border:1px solid #ffffff8f; border-radius:14%; background:linear-gradient(145deg,#ffffff4d,#ffffff14 24%,transparent 42%,transparent 76%,#4d301c1a); box-shadow:inset 1px 1px 0 #ffffffbd,inset -1px -2px 0 #59402a33; pointer-events:none; }
.cell.owner-green .tile::after { inset:2px; border:3px solid #18823a; background:linear-gradient(145deg,#48d26055,#23964345 58%,#126b2d55); box-shadow:inset 0 0 0 1px #e0ffd0,inset 1px 1px 0 #ffffffbd; }
.cell.owner-red .tile::after { inset:2px; border:3px solid #b52e2a; background:linear-gradient(145deg,#ff665355,#cf332e45 58%,#8c1d2055); box-shadow:inset 0 0 0 1px #ffe2c8,inset 1px 1px 0 #ffffffbd; }
.rack .tile { width:min(50px,calc((100% - 32px)/8)); height:auto; flex:0 0 min(50px,calc((100% - 32px)/8)); max-width:50px; filter:drop-shadow(0 2px 1px #2c16097a) drop-shadow(0 4px 3px #2c160938); }
.shuffle-rack { flex:0 0 min(50px,calc((100% - 32px)/8)); width:min(50px,calc((100% - 32px)/8)); aspect-ratio:1; display:grid; place-items:center; padding:4px; border-radius:12px; border:1px solid #d3b175; background:linear-gradient(145deg,#fff4d8,#ebd4a9 70%,#d7b77c); box-shadow:inset 1px 1px 0 #fff,inset -1px -2px 0 #80613b45,0 2px 2px #51351f65; color:#49331c; }
.shuffle-rack svg { display:block; width:80%; height:80%; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.shuffle-rack:disabled { opacity:.45; cursor:default; }
.tile.selected { outline:3px solid var(--gold); border-radius:13%; transform:rotate(var(--tilt)) translateY(-3px); }
.tile.dragging { opacity:.4; cursor:grabbing; }
.drag-ghost { position:fixed !important; left:0; top:0; margin:0; max-width:none; max-height:none; opacity:.96; pointer-events:none; z-index:100; transform:rotate(var(--tilt)) scale(1.06); transition:transform 1s ease,opacity 1s ease; filter:drop-shadow(0 7px 7px #30180c7a); }
.drag-ghost.over-board { opacity:.82; transform:rotate(var(--tilt)) scale(.84); }
.rack-return-hidden { visibility:hidden !important; }
.rack-return-ghost { position:fixed !important; left:0; top:0; margin:0; max-width:none; max-height:none; pointer-events:none; z-index:120; }
.actions { display:grid; grid-template-columns:66px minmax(0,1fr) 66px; align-items:center; gap:16px; margin:14px 4px 0; }
.actions button { min-width:0; min-height:56px; }
.actions #play { font-size:23px; border-radius:17px; letter-spacing:.015em; }
.game-view.war-mode.current-green .actions #play { border:3px solid #e4bd64; background:linear-gradient(#365d38,#365d38),var(--paper-image) center / cover; box-shadow:inset 0 0 0 1px #a7c478,0 3px 0 #263d2a,0 5px 5px #57270966; }
.game-view.war-mode.current-red .actions #play { border:3px solid #e4bd64; background:linear-gradient(#365d38,#365d38),var(--paper-image) center / cover; box-shadow:inset 0 0 0 1px #a7c478,0 3px 0 #263d2a,0 5px 5px #57270966; }
.icon-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:5px; }
.icon-button svg { display:block; width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:3.7; stroke-linecap:round; stroke-linejoin:round; }
.action-caption { font-size:8px; font-weight:700; letter-spacing:.05em; }
.game-footer { display:grid; grid-template-columns:1fr; justify-items:center; gap:6px; margin:12px 4px 0; padding-top:8px; border-top:1px solid #99603655; color:#4c230f; font-size:10px; font-weight:700; }
.game-view.war-mode .game-info { display:none; }
.game-footer .footer-links .text-button { font-size:clamp(12px,3.6vw,14px); }
.footer-links,.setup-links { display:flex; align-items:center; gap:clamp(11px,3.5vw,17px); }
.footer-links { justify-content:center; flex-wrap:wrap; }
.setup-links { justify-content:center; margin-top:12px; }
.setup-card #nickname-status:empty { display:none; }
.game-info { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; align-items:center; }
.eyebrow { margin:0; font-size:10px; font-weight:700; letter-spacing:.12em; }
.game-info .eyebrow { letter-spacing:.045em; }
.text-button { padding:4px 0 3px; border:0; border-bottom:1px solid #9b6a40aa; border-radius:0; background:none; box-shadow:none; color:#633517; font-size:clamp(9px,2.8vw,11px); font-weight:800; text-transform:none; white-space:nowrap; text-decoration:none; text-underline-offset:3px; }
.text-button:hover { color:#315c37; border-bottom-color:#315c37; }
.text-button:active { box-shadow:none; }
.hint { margin:6px 7px 0; text-align:center; font-size:10px; line-height:1.35; color:#68462d; }
.hint:empty { display:none; }
.rules-view,.online-view { display:flex; flex-direction:column; min-height:calc(100svh - 200px); margin:10px 4px 24px; padding:18px; box-shadow:0 3px 5px #70330b35; }
.screen-heading { display:grid; grid-template-columns:1fr; align-items:center; margin-bottom:12px; }
.screen-heading h2 { justify-self:center; margin:0; color:var(--brown); font-size:23px; text-transform:uppercase; letter-spacing:.05em; }
.screen-footer { display:flex; justify-content:flex-start; margin-top:auto; padding-top:22px; }
.screen-back { justify-self:start; font-size:13px; }
.rules-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:4px; border-radius:12px; background:#7a451c20; }
.rules-tabs button { min-width:0; padding:9px 5px; border-radius:9px; font-size:11px; }
.rules-tabs button[aria-selected="true"] { color:#fff3d7; background:linear-gradient(#315c37,#315c37),var(--paper-image) center/cover; }
.rules-content { margin-top:14px; }
.mine-rule-art { display:flex; align-items:center; gap:10px; float:right; margin:0 0 6px 10px; padding:5px 8px; border:1px solid #a57a48; border-radius:11px; background:#f0ddb9; color:#48633b; font-size:11px; font-weight:800; }
.mine-rule-art img { width:45px; height:45px; object-fit:contain; filter:drop-shadow(0 2px 1px #47331f55); }
.rules-content h3,.online-view h3 { margin:16px 0 5px; color:#693818; font-size:15px; }
.rules-content p,.online-view p { margin:6px 0; font-size:13px; line-height:1.42; }
.rules-content ul { margin:6px 0 0; padding-left:20px; }
.rules-content li { margin:5px 0; font-size:12px; line-height:1.38; }
.rules-section { padding-top:7px; border-top:1px solid #8a582d45; }
.online-view { text-align:center; }
.online-mode-badge { display:inline-flex; align-items:center; margin:2px 0 5px; padding:6px 13px; border:1px solid #b98750; border-radius:999px; background:#fff1d4; color:#5d3519; font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.online-intro { margin-top:2px !important; }
.guest-name-label { display:block; max-width:340px; margin:15px auto 0; text-align:left; }
.guest-name-label input { background:#fff9e9; }
.online-view .wordlist-status { min-height:0; margin:4px 0; }
.online-view .wordlist-status:empty { display:none; }
.online-status { margin:14px 0; padding:12px; border:1px solid #b98750; border-radius:10px; background:#fff0cd; color:#70431f; font-size:13px; font-weight:700; }
.online-status[data-kind="success"] { border-color:#6a8c52; background:#e6f0d8; color:#315c37; }
.online-status[data-kind="searching"] { border-color:#b98750; background:#fff7e4; }
.online-status[data-kind="warning"] { border-color:#b98750; background:#fff0cd; }
.online-wait-copy { font-weight:600; }
.match-join-copy { padding:9px 10px; border-radius:9px; background:#7b481719; }
.online-view #find-opponent,.online-view #enter-match,.online-view #cancel-match-search { width:100%; margin:6px 0; }
.online-view button:disabled { opacity:.48; cursor:not-allowed; }
.match-notification-prompt { margin:12px 0; padding:11px; border:1px dashed #9a703c; border-radius:11px; background:#fff3d6; }
.match-notification-prompt p { margin:0 0 8px; font-weight:700; }
.match-notification-prompt button { width:100%; }
.match-notification-prompt .notification-confirmed { margin:0; color:#315c37; font-weight:800; }
.auth-buttons { display:grid; gap:8px; }
.auth-buttons button { width:100%; text-transform:none; }
.auth-buttons button:disabled { background:linear-gradient(#efe0c3,#e7d3ae); color:#745e47; }
.auth-heading { margin:18px 0 5px !important; }
.auth-note { color:#694a2c; font-size:11px !important; }
.online-note { color:#694a2c; font-size:11px !important; }
.account-create-link { width:100%; margin-top:10px; }
.account-view { display:flex; flex-direction:column; gap:12px; min-height:calc(100svh - 200px); margin:10px 4px 24px; padding:18px; box-shadow:0 3px 5px #70330b35; }
.account-view p { margin:0; font-size:13px; line-height:1.4; }
.account-view label { text-align:left; }
.account-view button:disabled,.account-view input:disabled { opacity:.62; cursor:not-allowed; }
.good-luck { position:fixed; z-index:200; left:50%; top:50%; display:grid; justify-items:center; gap:3px; min-width:min(270px,calc(100vw - 42px)); padding:19px 34px 17px; border:2px solid #e8bd68; border-radius:17px; background:linear-gradient(#315c37f2,#315c37f2),var(--paper-image) center/cover; box-shadow:0 7px 0 #60371d,0 18px 45px #3517078a,inset 0 0 0 2px #fff0c277; color:#fff0c9; pointer-events:none; opacity:0; animation:good-luck-in 2s ease both; }
.good-luck-star { color:#edc35e; font-size:22px; line-height:1; text-shadow:0 1px 3px #25160e; }
.good-luck-kicker { color:#f4d99e; font-size:9px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.good-luck strong { font-size:clamp(29px,8vw,39px); font-weight:900; letter-spacing:.015em; text-transform:uppercase; text-shadow:0 2px 0 #234129; }
.good-luck-rule { width:54px; height:2px; margin-top:2px; border-radius:2px; background:#efc366; box-shadow:0 1px 0 #fff2c077; }
@keyframes good-luck-in { 0%{opacity:0;transform:translate(-50%,-44%) scale(.94)} 12%{opacity:1;transform:translate(-50%,-50%) scale(1)} 70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-53%) scale(1.015)} }

/* Befintlig spelåterkoppling, joker och animationer. */
.game-view.opening { pointer-events:auto; }
.game-view.claiming .board-viewport,.game-view.claiming .rack-area,.game-view.claiming .actions { pointer-events:none; }
.game-view.claiming .game-footer,.game-view.claiming .hint { pointer-events:none; }
.toast { position:fixed; left:50%; bottom:28px; width:max-content; max-width:calc(100vw - 28px); transform:translate(-50%,20px); background:var(--brown); color:#fff4d6; border:2px solid var(--gold); border-radius:9px; padding:12px 18px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; box-shadow:0 5px 15px #2e110c88; z-index:10; text-align:center; font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.result-toast { width:min(420px,calc(100vw - 28px)); display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 17px; background:linear-gradient(#4b2412c7,#4b2412c7),var(--paper-image) center / cover; }
.result-toast .result-title,.result-toast .result-line,.result-toast .result-total { position:relative; z-index:1; }
.result-title { font-size:15px; letter-spacing:.35px; }
.result-line { font-size:12px; line-height:1.25; font-variant-numeric:tabular-nums; }
.result-total { margin-top:3px; padding-top:5px; border-top:1px solid #e9bd72; font-size:13px; font-weight:900; }
.blank-picker { width:min(420px,calc(100vw - 28px)); max-height:calc(100svh - 28px); padding:0; border:2px solid #9e693b; border-radius:16px; color:var(--ink); background:var(--paper); box-shadow:0 5px 0 #713116,0 18px 40px #24100688; }
.blank-picker::backdrop { background:#241309a8; backdrop-filter:blur(2px); }
.blank-picker-card { padding:20px; text-align:center; background:var(--paper) var(--paper-image) center / cover; }
.blank-picker-card h2 { margin:4px 0 6px; color:var(--brown); font-size:24px; font-weight:900; }
.blank-picker-card p:not(.eyebrow) { margin:0 0 14px; font-size:13px; }
.action-confirm { width:min(360px,calc(100vw - 32px)); padding:0; border:2px solid #9e693b; border-radius:16px; color:var(--ink); background:var(--paper); box-shadow:0 5px 0 #713116,0 18px 40px #24100688; }
.action-confirm::backdrop { background:#241309a8; backdrop-filter:blur(2px); }
.action-confirm-card { padding:22px 20px 18px; text-align:center; background:var(--paper) var(--paper-image) center / cover; }
.action-confirm-card h2 { margin:4px 0 20px; color:var(--brown); font-size:21px; line-height:1.25; font-weight:900; }
.action-confirm-buttons { display:flex; justify-content:center; gap:10px; }
.action-confirm-buttons button { min-width:105px; }
.blank-letters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.blank-letter-option { position:relative; justify-self:center; width:100%; max-width:48px; aspect-ratio:1; min-width:0; min-height:0; padding:0; overflow:hidden; appearance:none; border:1px solid #76512f; border-radius:14%; background:linear-gradient(145deg,#fffdf2,#f5e5c5 72%,#e7d2ae); box-shadow:inset 1px 1px 0 #fff,inset -1px -2px 0 #80613b45,0 2px 2px #51351f65; color:#30241b; font-family:inherit; font-size:22px; font-weight:800; line-height:1; text-shadow:0 1px #fff; }
.blank-letter-option::after { content:''; position:absolute; inset:1px; border:1px solid #ffffff9e; border-radius:13%; background:linear-gradient(145deg,#ffffff45,#ffffff12 24%,transparent 44%,transparent 76%,#4d301c1a); box-shadow:inset 1px 1px 0 #ffffffbd,inset -1px -2px 0 #59402a33; pointer-events:none; }
.blank-letter-option:hover,.blank-letter-option:focus-visible { outline:3px solid var(--gold); outline-offset:1px; }
.blank-cancel { margin-top:18px; min-width:120px; }
.start-cascade { position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none; }
.opening-tile { position:absolute; left:var(--x); top:-16%; width:clamp(22px,7.2%,52px) !important; height:clamp(22px,7.2%,52px) !important; opacity:0; transform-style:preserve-3d; animation:opening-cascade 4.15s cubic-bezier(.18,.78,.22,1) var(--delay) both; }
@keyframes opening-cascade { 0%{opacity:0;transform:translate3d(0,var(--y),-80px) rotateX(70deg) rotateY(-25deg) rotateZ(var(--spin))} 14%{opacity:1} 48%{opacity:1;transform:translate3d(-5px,48vh,30px) rotateX(12deg) rotateY(8deg) rotateZ(calc(var(--spin) * .35))} 57%{transform:translate3d(2px,45vh,55px) rotateX(-7deg) rotateY(-5deg) rotateZ(calc(var(--spin) * .2))} 66%{transform:translate3d(0,48vh,20px) rotateX(4deg) rotateY(2deg) rotateZ(0deg)} 100%{opacity:0;transform:translate3d(0,125vh,-20px) rotateX(0deg) rotateY(0deg) rotateZ(4deg)} }
.cell.highlight { animation:highlight .95s ease both; }
@keyframes highlight { 0%,100%{filter:none} 35%{filter:brightness(1.45) saturate(1.35);box-shadow:inset 0 0 0 4px #f4bd3a} }
.bonus-burst { position:absolute; z-index:0; left:50%; top:43%; width:230px; height:96px; transform:translate(-50%,-50%); pointer-events:none; background:radial-gradient(circle,#ffd475 0 2px,transparent 3px) 8% 25%/18px 18px,radial-gradient(circle,#f48a88 0 2px,transparent 3px) 87% 68%/21px 21px,radial-gradient(circle,#fff0bd 0 1.5px,transparent 2.5px) 72% 8%/16px 16px; opacity:0; }
.toast.bonus .bonus-burst { animation:bonus-burst .8s ease-out both; }
@keyframes bonus-burst { 0%{opacity:0;transform:translate(-50%,-40%) scale(.45)} 25%{opacity:.95;transform:translate(-50%,-50%) scale(1.22)} 100%{opacity:0;transform:translate(-50%,-65%) scale(1.5)} }
.paper-explosion { position:absolute; z-index:0; left:50%; top:50%; width:min(360px,95vw); height:150px; transform:translate(-50%,-50%); overflow:visible; pointer-events:none; }
.paper-explosion::before,.paper-explosion::after { content:''; position:absolute; inset:-25%; opacity:0; }
.paper-explosion::before { background:repeating-conic-gradient(from -8deg at 50% 52%,transparent 0deg 11deg,#e6aa3c 11deg 14deg,transparent 14deg 22deg,#d96742 22deg 25deg,transparent 25deg 33deg,#f4d18a 33deg 36deg,transparent 36deg 45deg); -webkit-mask:radial-gradient(ellipse,transparent 0 8%,#000 17% 61%,transparent 73%); mask:radial-gradient(ellipse,transparent 0 8%,#000 17% 61%,transparent 73%); }
.paper-explosion::after { background:radial-gradient(6px 13px at 14% 35%,#f3d797 98%,transparent),radial-gradient(5px 11px at 25% 72%,#db704d 98%,transparent),radial-gradient(6px 12px at 78% 25%,#edb54f 98%,transparent),radial-gradient(5px 10px at 88% 70%,#f2dfa9 98%,transparent),radial-gradient(5px 11px at 64% 14%,#d96742 98%,transparent),radial-gradient(4px 9px at 36% 22%,#e8b750 98%,transparent); }
.toast.big-score .paper-explosion::before { animation:paper-score-burst .85s cubic-bezier(.12,.72,.22,1) both; }
.toast.big-score .paper-explosion::after { animation:paper-score-confetti .9s ease-out both; }
@keyframes paper-score-burst { 0%{opacity:0;transform:scale(.15) rotate(-20deg)} 18%{opacity:.9} 100%{opacity:0;transform:scale(1.08) rotate(8deg)} }
@keyframes paper-score-confetti { 0%{opacity:0;transform:scale(.3) rotate(0)} 20%{opacity:.9} 100%{opacity:0;transform:scale(1.08) rotate(15deg)} }
.timer.timer-warning { animation:timer-warning 1.05s cubic-bezier(.3,.8,.2,1) both; }
@keyframes timer-warning { 0%,100%{transform:scale(1)} 35%{transform:scale(1.13)} 68%{transform:scale(1.07)} }
@media (min-width:600px) {
  .app-shell { min-height:100svh; background:#e85813 url('ordknuff-orange-paper-texture.png') center / cover; box-shadow:0 0 45px #6d351833; }
}
@media (max-width:359px) {
  .app-shell { --shell-inset:10px; }
  .score-card { padding-inline:9px; gap:8px; }
  .player-score > span { font-size:16px; }
  .game-head { gap:9px; }
  .clock { grid-template-columns:21px 65px; padding-left:9px; gap:4px; }
  .clock-icon { width:21px; flex-basis:21px; }
  .timer { width:65px; font-size:24px; }
  .turn-label { font-size:18px; }
  .actions { grid-template-columns:56px minmax(0,1fr) 56px; gap:12px; }
  .actions #play { font-size:20px; }
  .action-caption { font-size:11px; }
  .rack { padding-inline:6px; min-height:51px; gap:3px; }
  .rack .tile,.shuffle-rack { width:calc((100% - 24px)/8); flex-basis:calc((100% - 24px)/8); }
  .shuffle-rack { padding:3px; border-radius:8px; }
  .blank-letters { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
  .blank-picker-card { padding:16px; }
  .brand-tagline { font-size:10px; }
  .game-footer { margin-inline:0; }
  .footer-links { gap:clamp(9px,3vw,12px); }
  .rules-view,.online-view { padding:14px; }
  .war-summary { grid-template-columns:minmax(0,1fr) 1px 60px 1px minmax(0,1fr); gap:4px; min-height:82px; padding:12px 6px 6px; }
  .war-player { grid-template-columns:23px minmax(0,1fr) 30px; gap:3px; }
  .war-player.red { grid-template-columns:30px minmax(0,1fr) 23px; }
  .war-rank { width:23px; height:31px; }
  .war-player-data b { font-size:9px; }
  .war-player-data span { font-size:10px; }
  .war-player-data span.long-share { font-size:8px; letter-spacing:-.04em; }
  .war-delta { flex-basis:30px; width:30px; height:22px; font-size:11px; }
  .war-divider { height:53px; }
  .war-laurel { top:4px; width:60px; height:17px; }
  .war-pie { flex-basis:58px; width:58px; height:58px; margin-top:8px; }
  .war-pie-star { width:19px; height:19px; font-size:14px; }
  .war-pie-share { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
}

/* Inskjutningsmarkören visar var brickan hamnar vid omordning. */
.rack .drop-before::before,.rack .drop-after::before { content:''; position:absolute; top:-5px; bottom:-5px; width:3px; background:#ffe5a4; border-radius:2px; box-shadow:0 0 5px #ffe5a4; pointer-events:none; }
.rack .drop-before::before { left:-4px; }
.rack .drop-after::before { right:-4px; }

.match-screen { position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:24px; background:#e85813 url('ordknuff-orange-paper-texture.png') center/cover; }.match-screen-card { display:grid; justify-items:center; gap:20px; width:min(360px,100%); padding:32px 22px; border:2px solid #a66d32; border-radius:24px; background:var(--paper) var(--paper-image) center/cover; box-shadow:0 8px 0 #713a1d,0 20px 50px #35170766; text-align:center; }.match-screen-card h2 { margin:0; color:#315c37; font-size:25px; }.match-screen-card button { width:100%; }.search-tile { display:grid; place-items:center; width:106px; aspect-ratio:1; border:2px solid #a77d4e; border-radius:14px; background:linear-gradient(145deg,#fffdf2,#e9d4af); box-shadow:0 12px 24px #40200e70,inset 0 2px 2px #fff; font-size:65px; font-weight:900; animation:search-spin 2.4s ease-in-out infinite; transform-style:preserve-3d; }@keyframes search-spin { 0%,100%{transform:perspective(500px) rotateY(-25deg) rotateX(10deg) translateY(5px)}50%{transform:perspective(500px) rotateY(335deg) rotateX(-8deg) translateY(-8px)} }

.offline-screen { min-height:calc(100svh - 60px); margin:12px 4px 24px; padding:22px; border:2px solid #a66d32; border-radius:20px; background:var(--paper) var(--paper-image) center/cover; box-shadow:0 4px 0 #713a1d,0 8px 16px #57270944; }
.warning-count { text-align:center; margin:4px 0; color:#70431f; font-size:12px; font-weight:800; }

.search-notify { width:100%; padding:12px; border:1px solid #b98750; border-radius:12px; background:#fff0cd; color:#70431f; }.search-notify p { margin:0 0 8px; font-size:13px; font-weight:700; }.search-notify button { width:100%; }

.invite-card { max-height:calc(100dvh - 72px); overflow:auto; }
.invite-card h2 { margin-bottom:8px; }
.invite-card p { margin:10px 0; }
.invite-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin:10px 0; }
.invite-card input[type="url"] { width:100%; text-align:center; }
.invite-form { display:grid; gap:10px; margin-top:14px; text-align:left; }
.invite-consent { display:flex; align-items:center; gap:8px; }
.invite-consent input { width:auto; }