:root{
  --home-ink:#e9f4fb;
  --home-muted:rgba(233,244,251,.78);
  --home-green:#2f7f78;
  --home-green2:#22645f;
  --home-gold:#7aafd5;
  --home-tile:#b7d6ec;
  --home-tile-edge:#5d8cae;
}
#home.home-wordworld{
  position:relative!important;width:100%!important;min-height:100dvh!important;height:100dvh!important;
  overflow:hidden!important;padding:0!important;margin:0!important;background:#6fb6aa!important;isolation:isolate!important
}
.home-wordworld-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.28),transparent 28%),
    radial-gradient(circle at 16% 72%,rgba(166,204,231,.30),transparent 26%),
    radial-gradient(circle at 88% 62%,rgba(255,255,255,.16),transparent 28%),
    linear-gradient(145deg,#77c4b5 0%,#59aa9e 48%,#3c8d83 100%)
}
.home-wordworld-bg:after{
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:36px 36px
}
.home-wordworld-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 44%,rgba(28,92,85,.18))
}
.word-scene{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.word-board{
  position:absolute;left:50%;top:13%;transform:translate(-50%,-50%) rotate(-2deg);
  width:250px;height:180px;border-radius:50%;display:grid;place-items:center;
}
.board-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(122,175,213,.25),transparent 65%);filter:blur(10px)}
.tile-row{position:absolute;display:flex;gap:10px}.tile-row-top{top:20px;transform:rotate(-5deg)}.tile-row-bottom{top:88px;transform:rotate(5deg)}
.game-tile{
  width:66px;height:66px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(145deg,#fff1c8,var(--home-tile));color:#1b2c38;font-weight:950;font-size:2rem;
  border:2px solid rgba(37,63,82,.25);box-shadow:0 10px 0 #446882,0 18px 28px rgba(0,0,0,.28),inset 0 2px rgba(255,255,255,.8)
}
.game-tile.small{width:56px;height:56px;font-size:1.65rem}.game-tile.accent{background:linear-gradient(145deg,#9accef,#6eaad4);transform:translateY(-8px) scale(1.12)}
.word-orbit{
  position:absolute;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(145deg,#fff0c6,#9ec3de);color:#1b2c38;font-size:1.25rem;font-weight:950;
  border:1px solid rgba(37,63,82,.28);box-shadow:0 7px 0 #3d5e76,0 12px 22px rgba(0,0,0,.24);opacity:.88
}
.orbit-a{left:8%;top:15%;transform:rotate(-13deg)}.orbit-r{right:8%;top:17%;transform:rotate(10deg)}
.orbit-s{left:5%;top:40%;transform:rotate(8deg)}.orbit-ö{right:5%;top:38%;transform:rotate(-8deg)}
.orbit-k{right:14%;bottom:18%;transform:rotate(13deg)}
.word-fragment{
  position:absolute;color:rgba(233,244,251,.08);font-weight:950;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap
}
.fragment-1{left:-16px;bottom:20%;font-size:4rem;transform:rotate(-90deg)}
.fragment-2{right:-28px;top:46%;font-size:2.1rem;transform:rotate(90deg)}
.fragment-3{left:12%;top:6%;font-size:1.3rem;transform:rotate(-8deg)}
.home-wordworld-shell{
  position:relative;z-index:5;width:min(100%,520px);height:100dvh;margin:0 auto;
  padding:max(28px,calc(env(safe-area-inset-top) + 18px)) 18px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center
}
.home-hero{text-align:center;color:var(--home-ink);margin:22vh auto 14px;width:100%}
.home-kicker{
  display:inline-block;margin-bottom:8px;padding:6px 11px;border-radius:999px;background:rgba(233,244,251,.09);
  border:1px solid rgba(233,244,251,.14);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.home-hero h1{
  margin:0;color:var(--home-ink)!important;font-size:clamp(3.15rem,13vw,4.7rem)!important;line-height:.9!important;
  letter-spacing:-.055em!important;text-shadow:0 4px 0 #0a4678,0 10px 26px rgba(0,0,0,.26)!important
}
.home-hero p{margin:10px auto 0;max-width:330px;color:var(--home-muted);font-size:.9rem;font-weight:800}
.home-panel{
  width:100%;display:grid;gap:11px;padding:15px;border-radius:24px;
  background:linear-gradient(180deg,rgba(43,126,118,.78),rgba(34,103,96,.84));
  border:1px solid rgba(122,175,213,.26);box-shadow:0 18px 44px rgba(0,0,0,.24);backdrop-filter:blur(10px)
}
.home-panel.hidden{display:none!important}
.home-main-button{
  position:relative!important;width:100%!important;min-height:66px!important;border:1px solid rgba(122,175,213,.44)!important;
  border-radius:18px!important;padding:13px 50px 13px 16px!important;background:linear-gradient(180deg,#3e958b,#2f766f)!important;
  color:var(--home-ink)!important;box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.08)!important;
  font:inherit!important;text-align:left!important;cursor:pointer!important
}
.home-main-button:active{transform:translateY(1px)}
.home-main-button-title{display:block;font-size:1.08rem;font-weight:950}.home-main-button-sub{display:block;margin-top:3px;color:rgba(233,244,251,.68);font-size:.75rem;font-weight:750}
.home-main-arrow{position:absolute;right:18px;top:50%;transform:translateY(-52%);font-size:1.9rem;color:var(--home-gold);font-weight:500}
.home-secondary-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.home-details{position:relative}.home-details summary{
  list-style:none;padding:8px 12px;border-radius:999px;background:rgba(233,244,251,.06);border:1px solid rgba(233,244,251,.12);
  color:var(--home-ink);font-size:.76rem;font-weight:900;cursor:pointer
}
.home-details summary::-webkit-details-marker{display:none}
.home-popover{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(88vw,400px);max-height:72dvh;overflow:auto;
  padding:18px;border-radius:20px;background:rgba(58,112,106,.97);border:1px solid rgba(122,175,213,.35);color:var(--home-ink);
  box-shadow:0 24px 60px rgba(0,0,0,.45)
}
.home-popover h2{margin:0 0 10px;color:var(--home-ink)!important}.home-popover p{margin:8px 0;font-size:.84rem;line-height:1.4;font-weight:650}
.home-score-popover{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home-score-popover .highscore-board{margin:0!important;padding:10px!important;border:0!important;border-radius:13px!important;background:rgba(255,255,255,.07)!important;color:var(--home-ink)!important;box-shadow:none!important}.home-score-popover .highscore-board h3{margin:0 0 7px!important;color:var(--home-ink)!important;font-size:.8rem!important}.home-score-popover .highscore-list{margin:0!important;padding:0!important;max-height:190px;overflow:auto}.home-score-popover .highscore-list li{padding:5px 6px!important;margin:3px 0!important;border:0!important;border-radius:7px!important;background:#e8f3fb!important;color:#1b2c38!important;font-size:.67rem!important}.home-score-popover .highscore-empty{color:rgba(233,244,251,.62)!important;font-size:.7rem!important}
.home-back-button{justify-self:start;border:0!important;background:rgba(233,244,251,.08)!important;color:var(--home-ink)!important;border-radius:999px!important;padding:8px 12px!important;font:inherit!important;font-size:.8rem!important;font-weight:900!important}
.home-submenu-header{text-align:center;color:var(--home-ink)}.home-submenu-header h2{margin:0!important;color:var(--home-ink)!important}.home-submenu-header p{margin:4px 0 2px;color:var(--home-muted);font-size:.8rem}
@media(max-height:760px){
  .word-board{top:15%;transform:translate(-50%,-50%) scale(.78) rotate(-2deg)}
  .home-wordworld-shell{padding-top:max(18px,calc(env(safe-area-inset-top) + 10px));justify-content:center}
  .home-hero{margin:18vh auto 12px}
  .home-hero h1{font-size:2.9rem!important}.home-hero p{font-size:.8rem}.home-panel{padding:13px}.home-main-button{min-height:60px!important}
}
@media(max-width:390px){
  .game-tile{width:58px;height:58px;font-size:1.7rem}.game-tile.small{width:50px;height:50px}
  .word-board{transform:translate(-50%,-50%) scale(.92) rotate(-2deg)}
  .home-score-popover{grid-template-columns:1fr}
}


/* Separate single-player mode selection screen */
.solo-mode-screen{
  position:relative!important;
  width:100%!important;
  min-height:100dvh!important;
  height:100dvh!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  background:#071c14!important;
  isolation:isolate!important;
}
.solo-mode-screen.hidden{display:none!important}
.solo-mode-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 18%,rgba(80,145,96,.28),transparent 30%),
    radial-gradient(circle at 18% 78%,rgba(88,142,181,.16),transparent 26%),
    linear-gradient(145deg,#113323 0%,#082118 48%,#061710 100%);
}
.solo-mode-bg:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:36px 36px;
}
.solo-mode-inner{
  position:relative;
  z-index:2;
  width:min(100%,520px);
  height:100dvh;
  margin:0 auto;
  padding:max(22px,env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}
.solo-mode-back{
  align-self:flex-start;
  border:1px solid rgba(233,244,251,.18)!important;
  border-radius:999px!important;
  padding:9px 13px!important;
  background:rgba(42,102,96,.72)!important;
  color:var(--home-ink)!important;
  font:inherit!important;
  font-size:.82rem!important;
  font-weight:900!important;
}
.solo-mode-brand{
  text-align:center;
  color:var(--home-ink);
  margin:auto 0 22px;
}
.solo-mode-brand h1{
  margin:8px 0 4px!important;
  color:var(--home-ink)!important;
  font-size:clamp(3rem,13vw,4.5rem)!important;
  line-height:.9!important;
  letter-spacing:-.055em!important;
  text-shadow:0 4px 0 #0a4678,0 10px 26px rgba(0,0,0,.26)!important;
}
.solo-mode-brand p{
  margin:10px 0 0;
  color:var(--home-muted);
  font-size:.95rem;
  font-weight:800;
}
.solo-mode-card{
  width:100%;
  display:grid;
  gap:12px;
  padding:16px;
  margin-bottom:auto;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(17,47,33,.90),rgba(8,27,19,.94));
  border:1px solid rgba(122,175,213,.26);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}
@media(max-height:760px){
  .solo-mode-brand{margin:auto 0 16px}
  .solo-mode-brand h1{font-size:2.9rem!important}
}


/* Brown / cream unified visual theme */
:root{
  --home-ink:#21313c;
  --home-cream:#e1f0fa;
  --home-cream2:#c0d9eb;
  --home-brown:#406c8c;
  --home-brown2:#2b4f68;
  --home-brown3:#223b4d;
  --home-gold:#7aafd5;
}
#home.home-wordworld{
  background:linear-gradient(180deg,#c2d5e3 0%,#92b4cd 46%,#5e8aa9 100%)!important;
}
.home-wordworld-bg{
  background:
    radial-gradient(circle at 50% 16%,rgba(255,247,224,.78),transparent 26%),
    radial-gradient(circle at 16% 68%,rgba(53,86,109,.16),transparent 28%),
    radial-gradient(circle at 86% 62%,rgba(204,229,247,.22),transparent 30%),
    linear-gradient(180deg,#c2d5e3 0%,#90b3cc 45%,#5e8aa9 100%)!important;
}
.home-wordworld-bg:after{
  opacity:.14!important;
  background-image:
    linear-gradient(rgba(39,65,84,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(39,65,84,.08) 1px,transparent 1px)!important;
}
.home-wordworld-overlay{
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%,rgba(37,63,82,.12))!important;
}
.word-fragment{color:rgba(35,58,74,.10)!important}
.word-orbit,.game-tile{
  background:linear-gradient(145deg,#fff1c8,#8cb8d7)!important;
  color:#1d2d38!important;
  border:2px solid #3b627d!important;
  box-shadow:0 7px 0 #345770,0 12px 20px rgba(32,52,66,.22),inset 0 2px rgba(255,255,255,.72)!important;
}
.game-tile.accent{
  background:linear-gradient(145deg,#9acbee,#5a98c4)!important;
  border-color:#2f5a79!important;
}
.orbit-m{left:22%;top:30%;transform:rotate(9deg)}
.orbit-e{right:23%;top:30%;transform:rotate(-7deg)}
.orbit-l{left:15%;top:58%;transform:rotate(-11deg)}
.orbit-n{right:14%;top:57%;transform:rotate(8deg)}
.orbit-t{left:28%;bottom:9%;transform:rotate(7deg)}
.orbit-i{right:28%;bottom:8%;transform:rotate(-9deg)}

.home-wordworld-shell{
  justify-content:center!important;
  padding:max(24px,calc(env(safe-area-inset-top) + 14px)) 18px calc(18px + env(safe-area-inset-bottom))!important;
}
.home-hero{margin:18vh auto 12px!important}
.home-kicker{
  background:linear-gradient(#6093b8,#447090)!important;
  border:2px solid #2d5069!important;
  color:#ecf5fc!important;
  box-shadow:0 3px 0 #29465b!important;
}
.home-hero h1{
  color:#eef6fc!important;
  text-shadow:0 4px 0 #2b4f69,0 9px 20px rgba(32,55,71,.25)!important;
}
.home-hero p{color:#344c5d!important;text-shadow:none!important}

.home-panel,.solo-mode-card{
  background:linear-gradient(180deg,#5585a8,#3c6481)!important;
  border:3px solid #2b4b61!important;
  box-shadow:0 7px 0 #263f51,0 14px 30px rgba(31,51,65,.24)!important;
}
.home-main-button{
  background:linear-gradient(180deg,#fff0c8,#9cc5e2)!important;
  color:#1b2831!important;
  border:3px solid #3c6582!important;
  box-shadow:0 5px 0 #314f65,inset 0 1px rgba(255,255,255,.65)!important;
}
.home-main-button-title{color:#1b2831!important}
.home-main-button-sub{color:#3b566a!important}
.home-main-arrow{color:#2a4c65!important}

.home-secondary-actions .home-details summary,
.home-back-button,
.solo-mode-back,
.soft-back,
.soft-primary,
.soft-secondary,
#onlineBack,
#cancelRoom,
#shareRoom{
  background:linear-gradient(180deg,#fff0c8,#94bdda)!important;
  color:#1f2d37!important;
  border:2px solid #395e79!important;
  box-shadow:0 3px 0 #304b5f!important;
}
.home-popover{
  background:linear-gradient(180deg,#fff1cf,#abcce4)!important;
  color:#202f39!important;
  border:3px solid #385f7a!important;
  box-shadow:0 8px 0 #314b5d,0 18px 36px rgba(32,53,68,.25)!important;
}
.home-popover h2,.home-score-popover .highscore-board h3{color:#202f39!important}
.home-score-popover .highscore-board{
  background:rgba(238,246,252,.55)!important;
  color:#202f39!important;
  border:1px solid #638ca9!important;
}
.home-score-popover .highscore-empty{color:#436176!important}
.home-score-popover .highscore-list li{
  background:#ebf5fc!important;
  color:#202f39!important;
  border:1px solid #91b2c9!important;
}
.solo-mode-screen{
  background:linear-gradient(180deg,#c2d5e3 0%,#92b4cd 46%,#5e8aa9 100%)!important;
}
.solo-mode-bg{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,247,224,.72),transparent 28%),
    linear-gradient(180deg,#c2d5e3 0%,#92b4cd 48%,#5e8aa9 100%)!important;
}
.solo-mode-brand{color:#202f39!important}
.solo-mode-brand h1{
  color:#eef6fc!important;
  text-shadow:0 4px 0 #2b4f69,0 9px 20px rgba(32,55,71,.25)!important;
}
.solo-mode-brand p{color:#344c5d!important}
@media(max-height:760px){
  .home-hero{margin:14vh auto 10px!important}
  .word-board{top:14%!important}
}

/* Brown v2: clean start screen without decorative letters */
#home .word-scene,
#home .word-orbit,
#home .word-board,
#home .word-fragment,
#home .letter-cloud,
#home .letter-chip{
  display:none!important;
}
#home .home-hero{
  margin:10vh auto 16px!important;
}
@media(max-height:760px){
  #home .home-hero{margin:7vh auto 12px!important}
}


/* Brown v3: compact composition with a simple visual base */
#home .home-wordworld-shell{
  justify-content:flex-start!important;
  padding-top:max(22px,calc(env(safe-area-inset-top) + 14px))!important;
  padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;
}
#home .home-hero{
  margin:5.5vh auto 12px!important;
}
#home .home-stage{
  position:relative;
  width:100%;
  margin-top:4px;
  padding:14px 0 42px;
}
#home .home-stage-platform{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(98%,500px);
  height:210px;
  border:3px solid #395e79;
  border-radius:34px 34px 18px 18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 24%),
    linear-gradient(180deg,#6696b9 0%,#527e9e 52%,#416a87 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,245,220,.30),
    0 8px 0 #325167,
    0 18px 30px rgba(35,58,75,.20);
}
#home .home-stage-platform:before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:22px;
  height:2px;
  border-radius:999px;
  background:rgba(36,63,83,.22);
  box-shadow:
    0 45px rgba(36,63,83,.16),
    0 91px rgba(36,63,83,.13),
    0 136px rgba(36,63,83,.10);
}
#home #mainMenu{
  position:relative;
  z-index:1;
  margin:0 auto!important;
}
@media(max-height:760px){
  #home .home-hero{margin:3.5vh auto 9px!important}
  #home .home-stage{padding-top:8px;padding-bottom:28px}
  #home .home-stage-platform{height:180px}
}


/* Brown v4: compact single-player mode screen */
.solo-mode-inner{
  justify-content:flex-start!important;
  padding-top:max(20px,env(safe-area-inset-top))!important;
  padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
}
.solo-mode-brand{
  margin:7vh 0 14px!important;
}
.solo-mode-card{
  margin-bottom:0!important;
}
@media(max-height:760px){
  .solo-mode-brand{margin:4vh 0 10px!important}
}


/* Brown v5: single menu box, no duplicate platform */
#home .home-stage{
  padding-bottom:18px!important;
}
#home .home-stage-platform{
  display:none!important;
}
#home #mainMenu{
  box-shadow:
    0 9px 0 #2e4b60,
    0 18px 34px rgba(31,51,66,.28)!important;
}


/* Brown v6: visually one single menu block */
#home .home-stage{
  padding-bottom:8px!important;
}
#home .home-stage:before,
#home .home-stage:after,
#home #mainMenu:before,
#home #mainMenu:after{
  content:none!important;
  display:none!important;
}
#home #mainMenu{
  border:3px solid #2b4b61!important;
  background:linear-gradient(180deg,#5585a8,#3c6481)!important;
  box-shadow:0 14px 28px rgba(31,51,66,.24)!important;
  transform:none!important;
}


/* Brown v7: inline highscore under the main brown menu block */
#home .home-highscore-details{
  display:contents!important;
}
#home .home-highscore-details > summary{
  list-style:none!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fff0c8,#94bdda)!important;
  color:#1f2d37!important;
  border:2px solid #395e79!important;
  box-shadow:0 3px 0 #304b5f!important;
  font-size:.76rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}
#home .home-highscore-details > summary::-webkit-details-marker{display:none!important}
#home .home-highscore-inline{
  grid-column:1/-1;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  margin-top:8px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg,#5585a8,#3c6481);
  border:2px solid #2b4b61;
  box-shadow:0 10px 20px rgba(31,51,66,.18);
}
#home .home-highscore-details[open] .home-highscore-inline{
  display:grid;
}
#home .home-highscore-inline .highscore-board{
  margin:0!important;
  padding:12px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#e6f2fb,#a8cce6)!important;
  border:2px solid #4a7492!important;
  box-shadow:none!important;
  color:#202f39!important;
}
#home .home-highscore-inline .highscore-board h3{
  margin:0 0 8px!important;
  color:#202f39!important;
  font-size:.92rem!important;
  text-align:center!important;
}
#home .home-highscore-inline .highscore-list{
  margin:0!important;
  padding:0!important;
  max-height:180px;
  overflow:auto;
}
#home .home-highscore-inline .highscore-list li{
  padding:5px 7px!important;
  margin:3px 0!important;
  border-radius:8px!important;
  background:#fffaf0!important;
  color:#202f39!important;
  border:1px solid #97b5cb!important;
  font-size:.7rem!important;
}
#home .home-highscore-inline .highscore-empty{
  color:#436176!important;
  font-size:.72rem!important;
  line-height:1.3;
  text-align:center;
}
@media(max-width:420px){
  #home .home-highscore-inline{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px;
  }
  #home .home-highscore-inline .highscore-board{
    padding:9px!important;
  }
  #home .home-highscore-inline .highscore-board h3{
    font-size:.8rem!important;
  }
  #home .home-highscore-inline .highscore-empty{
    font-size:.66rem!important;
  }
}


/* Brown v8: online back button matches single-player exactly */
#onlineScreen .online-screen-inner{
  padding-top:max(20px,env(safe-area-inset-top))!important;
}
#onlineScreen .online-mode-back{
  align-self:flex-start!important;
  display:inline-block!important;
  width:auto!important;
  margin:0 0 8px 0!important;
  border:2px solid #395e79!important;
  border-radius:999px!important;
  padding:9px 13px!important;
  background:linear-gradient(180deg,#fff0c8,#94bdda)!important;
  color:#1f2d37!important;
  box-shadow:0 3px 0 #304b5f!important;
  font:inherit!important;
  font-size:.82rem!important;
  font-weight:900!important;
}
#onlineScreen .online-brand{
  padding-top:18px!important;
}
#onlineScreen .soft-panel{
  margin-top:18px!important;
}


/* Brown v9: force online back placement to match solo */
#onlineScreen #onlineBack{
  align-self:flex-start!important;
  width:auto!important;
  margin:0 0 12px!important;
  position:static!important;
  display:inline-block!important;
  background:linear-gradient(180deg,#fff0c8,#94bdda)!important;
  color:#1f2d37!important;
  border:2px solid #395e79!important;
  border-radius:999px!important;
  padding:9px 13px!important;
  box-shadow:0 3px 0 #304b5f!important;
  font-size:.82rem!important;
  font-weight:900!important;
}


/* Brown v10: inline rules accordion, matching highscore */
#home .home-rules-details{
  display:contents!important;
}
#home .home-rules-details > summary{
  list-style:none!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fff0c8,#94bdda)!important;
  color:#1f2d37!important;
  border:2px solid #395e79!important;
  box-shadow:0 3px 0 #304b5f!important;
  font-size:.76rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}
#home .home-rules-details > summary::-webkit-details-marker{display:none!important}
#home .home-rules-inline{
  grid-column:1/-1;
  display:none;
  width:100%;
  margin-top:8px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff1cf,#abcce4);
  border:2px solid #385f7a;
  box-shadow:0 10px 20px rgba(31,51,66,.18);
  color:#202f39;
}
#home .home-rules-details[open] .home-rules-inline{
  display:block;
}
#home .home-rules-inline h2{
  margin:0 0 10px!important;
  color:#202f39!important;
  font-size:1rem!important;
  text-align:center!important;
}
#home .home-rules-inline p{
  margin:8px 0!important;
  color:#283a46!important;
  font-size:.79rem!important;
  line-height:1.42!important;
  font-weight:700!important;
}


/* Brown v11: allow vertical scrolling when inline sections expand */
#home.home-wordworld{
  min-height:100dvh!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
#home .home-wordworld-shell{
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
}
#home .home-stage{
  overflow:visible!important;
}


/* Brown v12: global page scrolling fix for iOS Safari */
html,
body{
  min-height:100%!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.app{
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
}
#home.home-wordworld,
#home .home-wordworld-shell{
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
}


/* Brown v13: only active accordion control stays visible */
#home .home-details.accordion-hidden{
  display:none!important;
}


/* Brown v14: online panels match the brown component theme */
#onlineScreen .soft-panel{
  background:linear-gradient(180deg,#5585a8,#3c6481)!important;
  border:3px solid #2b4b61!important;
  box-shadow:0 14px 28px rgba(31,51,66,.24)!important;
  color:#e1f0fa!important;
}
#onlineScreen .soft-panel h2{color:#e1f0fa!important}
#onlineScreen .online-intro,
#onlineScreen .soft-panel p,
#onlineScreen .soft-panel small,
#onlineScreen .soft-label,
#onlineScreen .soft-divider,
#onlineScreen .soft-waiting{color:#cadeec!important}
#onlineScreen .soft-primary{
  background:linear-gradient(180deg,#fff0c8,#94bdda)!important;
  color:#1f2d37!important;
  border:2px solid #395e79!important;
  box-shadow:0 3px 0 #304b5f!important;
}
#onlineScreen .soft-secondary,
#onlineScreen .soft-code{
  background:linear-gradient(180deg,#b4d3ea,#8bb4d1)!important;
  color:#1f2d37!important;
  border:2px solid #395e79!important;
  box-shadow:0 3px 0 #304b5f!important;
}


/* 20260920-CACHE-1: cache-bust marker */
html{--ordduellen-build:"20260920-CACHE-1"}


/* 20260920-QRBACK-1: QR scanner back is plain text */
#qrScannerModal #closeQrScanner{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  color:#111!important;
  font-size:1rem!important;
  font-weight:700!important;
}


/* Brown v15: stack highscore modes and use full-width horizontal score rows */
#home .home-highscore-inline{
  grid-template-columns:1fr!important;
  gap:10px!important;
}
#home .home-highscore-inline .highscore-board{
  width:100%!important;
  padding:10px 12px!important;
}
#home .home-highscore-inline .highscore-board h3{
  text-align:left!important;
  margin:0 0 7px!important;
  font-size:.88rem!important;
}
#home .home-highscore-inline .highscore-list{
  width:100%!important;
  max-height:190px!important;
}
#home .home-highscore-inline .highscore-list li{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:7px 10px!important;
  margin:4px 0!important;
  font-size:.72rem!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
#home .home-highscore-inline .highscore-empty{
  text-align:left!important;
  padding:6px 2px!important;
}
@media(max-width:420px){
  #home .home-highscore-inline{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
  }
  #home .home-highscore-inline .highscore-board{
    padding:9px 10px!important;
  }
  #home .home-highscore-inline .highscore-board h3{
    font-size:.82rem!important;
  }
  #home .home-highscore-inline .highscore-list li{
    font-size:.69rem!important;
    padding:7px 8px!important;
  }
}


/* Brown v16: vertical highscore lists with full-width horizontal result blocks */
#home .home-highscore-inline{
  grid-template-columns:1fr!important;
  gap:12px!important;
}
#home .home-highscore-inline .highscore-board{
  width:100%!important;
}
#home .home-highscore-inline .highscore-list{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  max-height:220px!important;
}
#home .home-highscore-inline .highscore-list li{
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  padding:9px 11px!important;
  margin:0!important;
  border-radius:10px!important;
  background:#fffaf0!important;
  border:1px solid #97b5cb!important;
  white-space:normal!important;
  line-height:1.15!important;
  text-align:left!important;
}
#home .home-highscore-inline .highscore-list li > *{
  min-width:0!important;
}
@media(max-width:420px){
  #home .home-highscore-inline .highscore-list{
    max-height:210px!important;
  }
  #home .home-highscore-inline .highscore-list li{
    grid-template-columns:auto 1fr auto!important;
    gap:8px!important;
    padding:8px 9px!important;
    font-size:.7rem!important;
  }
}


/* Blue v17: replace the brown page gradients with a light-blue gradient */
html,
body,
.app,
#home,
#soloModeScreen,
#onlineScreen,
#game{
  background:linear-gradient(
    180deg,
    #eef9ff 0%,
    #d9f1ff 36%,
    #b9e2f7 70%,
    #92c8e6 100%
  )!important;
}
#home .soft-home,
#home .home-wordworld-shell,
#soloModeScreen .solo-mode-bg,
#onlineScreen .online-screen-inner,
#game .play-scene{
  background:linear-gradient(
    180deg,
    #eef9ff 0%,
    #d9f1ff 36%,
    #b9e2f7 70%,
    #92c8e6 100%
  )!important;
}


/* Blue v18: final background override, including decorative background layers */
html,
body,
.app,
#home.home-wordworld,
#soloModeScreen,
#onlineScreen,
#game,
#home .home-wordworld-shell,
#soloModeScreen .solo-mode-inner,
#onlineScreen .online-screen-inner,
#game .play-scene{
  background:linear-gradient(180deg,#eef9ff 0%,#d9f1ff 36%,#b9e2f7 70%,#92c8e6 100%)!important;
}
#home .home-wordworld-bg,
#soloModeScreen .solo-mode-bg{
  background:
    radial-gradient(circle at 50% 16%,rgba(255,255,255,.72),transparent 28%),
    linear-gradient(180deg,#eef9ff 0%,#d9f1ff 38%,#b9e2f7 72%,#92c8e6 100%)!important;
}
#home .home-wordworld-overlay{
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 48%,rgba(75,145,185,.10) 100%)!important;
}


/* Blue panels v20: use the same dark-blue gradient as the start screen panel */
#home .home-panel,
.solo-mode-card,
#onlineScreen .soft-panel,
#home .home-highscore-inline,
#home .home-rules-inline,
#home .home-highscore-inline .highscore-board,
#home .home-score-popover .highscore-board,
#home .home-popover,
#game .word-book,
#game .word-tray,
#game .remaining-board{
  background:linear-gradient(180deg,#5585a8 0%,#3c6481 100%)!important;
  border-color:#2b4b61!important;
  color:#e1f0fa!important;
}
#onlineScreen .soft-panel h2,
#onlineScreen .online-intro,
#onlineScreen .soft-panel p,
#onlineScreen .soft-panel small,
#onlineScreen .soft-label,
#onlineScreen .soft-divider,
#onlineScreen .soft-waiting,
#home .home-highscore-inline .highscore-board h3,
#home .home-rules-inline h2,
#home .home-rules-inline p{
  color:#e1f0fa!important;
}