/* Spielpause: the site shares the app's graphite, paper and game accents.
   The six CSS dioramas are decorative; all game information remains in HTML. */
.home {
  color-scheme: dark;
  --paper: #181d1b;
  --ink: #f2eee3;
  --muted: #babdb0;
  --line: #3d483f;
  --purple: #342c40;
  --gold: #dfc086;
  --surface: #242c27;
  --deep: #111613;
  background: var(--paper);
  color: var(--ink);
}
.home :focus-visible { outline-color: var(--gold); }
.home ::selection { background: var(--gold); color: var(--deep); }
.home .site-header { background: rgba(24,29,27,.96); backdrop-filter: blur(18px); }
.home .brand-word { color: var(--ink); }
.home .site-nav a { color: var(--ink); }
.home .site-nav .nav-cta { background: var(--gold); color: var(--deep); }
.home .site-nav .nav-cta:hover { background: #f2d5a2; }
.home .little-dot { background: var(--gold); }
.home .eyebrow { color: var(--gold); letter-spacing: .18em; }
.home h1,.home h2 { font-family: Georgia,"Times New Roman",serif; font-weight: 400; letter-spacing: -.05em; }
.home .hero { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(24px,4vw,70px); padding-block: 86px 94px; }
.home .hero h1 { font-size: clamp(4rem,6.1vw,6.7rem); line-height: .99; }
.home .hero h1 span { color: var(--gold); }
.home .lede { font-size: 18px; line-height: 1.65; max-width: 490px; }
.home .button-primary { background: var(--gold); color: var(--deep); }
.home .button-primary:hover { background: #f1d3a0; }
.home .hero-secondary { color: var(--ink); }
.home .hero-note { margin-top: 44px; }
.home .hero-note strong { color: var(--ink); }
.home .mini-avatars b { border-color: var(--paper); }

/* A real perspective space: mat, cards and pieces have independent depth. */
.home .hero-game { background: var(--deep); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 34px 90px #0005; }
.home .scene-switch { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; gap: 7px; padding: 12px 14px; background: var(--surface); border-color: var(--line); }
.home .scene-switch button { flex: none; white-space: nowrap; min-height: 40px; padding: 9px 12px; color: var(--muted); border: 1px solid transparent; border-radius: 999px; font-size: 12px; }
.home .scene-switch button[aria-pressed="true"] { color: var(--deep); background: var(--gold); }
.home .scene-switch button:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.home .card-stage { height: 500px; background: radial-gradient(ellipse at 50% 22%,#334239 0%,#222e28 44%,#111a16 100%); }
.home .card-stage[data-game="grenzzahl"] { background: radial-gradient(ellipse at 50% 22%,#4b415a 0%,#272333 45%,#17131d 100%); }
.home .card-stage[data-game="stadt_land_fluss"] { background: radial-gradient(ellipse at 50% 24%,#4a4534 0%,#282a24 50%,#191a15 100%); }
.home .card-stage[data-game="kniffel"] { background: radial-gradient(ellipse at 50% 24%,#335447 0%,#20322c 50%,#151f1b 100%); }
.home .card-stage[data-game="bluff_dice"] { background: radial-gradient(ellipse at 50% 24%,#315053 0%,#1e3033 50%,#121e20 100%); }
.home .card-stage[data-game="battleship"] { background: radial-gradient(ellipse at 50% 24%,#324b59 0%,#1e313b 50%,#111e27 100%); }
.home .scene-label { z-index: 4; top: 28px; left: 30px; color: var(--ink); font-size: 10px; letter-spacing: .18em; opacity: .76; }
.home .card-world { transform-style: preserve-3d; transition: transform .35s ease-out; }
.home .stage-mat { top: 160px; left: 8%; width: 84%; height: 315px; border: 1px solid #637668; border-radius: 26px; background: #2c3b32; transform: rotateX(54deg) translateZ(-48px); box-shadow: 0 13px 0 #18241d,0 38px 50px #0007,inset 0 0 0 12px #29372e; }
.home .stage-mat span { height: 120px; border-color: #ffffff1c; }
.home .card-stage[data-game="grenzzahl"] .stage-mat { background: #383547; border-color: #6e647e; box-shadow: 0 13px 0 #211e2d,0 38px 50px #0007,inset 0 0 0 12px #302e3d; }
.home .show-card { top: 115px; left: calc(50% - 72px); width: 144px; transform-origin: 50% 115%; transform: translateX(calc((var(--i) - 2)*60px)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*13px)) translateZ(calc(24px + var(--i)*11px)) rotateZ(calc((var(--i) - 2)*13deg)) rotateY(-8deg); transition: transform .45s cubic-bezier(.2,.7,.2,1),opacity .24s; }
.home .show-card img { box-shadow: 0 3px 0 #d6d0b7,0 7px 0 #999787,0 25px 28px #0008; }
.home .card-stage:hover .show-card { transform: translateX(calc((var(--i) - 2)*68px)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*9px - 8px)) translateZ(calc(32px + var(--i)*14px)) rotateZ(calc((var(--i) - 2)*14deg)) rotateY(-5deg); }
.home .card-stage:not([data-game="farbimpuls"]):not([data-game="grenzzahl"]) .card-fan { opacity: 0; visibility: hidden; }
.home .round-sticker { z-index: 5; background: var(--gold); color: var(--deep); bottom: 29px; right: 30px; box-shadow: 0 8px 0 #0003; }
.home .hero-game figcaption { background: var(--surface); border-color: var(--line); color: var(--ink); font-size: 12px; }
.home .hero-game figcaption a { color: var(--gold); }

.home .story-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transform-style: preserve-3d; transition: opacity .32s ease; }
.home .card-stage[data-game="stadt_land_fluss"] .story-words,
.home .card-stage[data-game="kniffel"] .story-point,
.home .card-stage[data-game="bluff_dice"] .story-bluff,
.home .card-stage[data-game="battleship"] .story-ships { opacity: 1; visibility: visible; }
.home .story-sheet { position: absolute; width: 250px; height: 290px; left: calc(50% - 105px); top: 110px; padding: 60px 25px 0; background: #f2eee3; border-radius: 9px; border: 1px solid #d2c7ac; box-shadow: 4px 7px 0 #a99d81,15px 25px 25px #0008; transform: rotateZ(10deg) rotateY(-12deg) translateZ(35px); }
.home .story-sheet i { display: block; height: 28px; border-bottom: 2px solid #cec6b4; }
.home .story-letter { position: absolute; top: 223px; left: calc(50% - 154px); width: 82px; height: 85px; display: grid; place-items: center; border-radius: 13px; background: #ead3a2; color: #25323a; font: 700 45px Georgia,serif; border: 1px solid #f9eac7; box-shadow: 0 7px 0 #a98451,0 20px 21px #0008; transform: rotateZ(-15deg) translateZ(75px); }
.home .story-letter:nth-child(3) { left: calc(50% - 56px); top: 209px; background: var(--gold); transform: rotateZ(3deg) translateZ(80px); }
.home .story-letter:nth-child(4) { left: calc(50% + 43px); top: 231px; transform: rotateZ(13deg) translateZ(85px); }
.home .story-pencil { position: absolute; left: calc(50% + 142px); top: 142px; width: 17px; height: 245px; background: linear-gradient(90deg,#aa7137 0 23%,#e9aa50 23% 78%,#f3ce83 78%); transform: rotateZ(32deg) translateZ(85px); box-shadow: 8px 12px 12px #0007; }
.home .story-pencil::after { content:""; position:absolute; left:0; bottom:-20px; border-left:8px solid transparent; border-right:9px solid transparent; border-top:22px solid #e8d7ad; }
.home .story-scorecard { position:absolute; left:calc(50% - 78px); top:116px; width:222px; height:272px; padding:18px 20px; background:#f2eee3; color:#25323a; border-top:17px solid #4caa9b; border-radius:6px; transform:rotateZ(8deg) translateZ(42px); box-shadow:7px 11px 0 #a7bcb2,19px 25px 25px #0008; }
.home .story-scorecard b { display:block; color:#407c75; font-size:13px; letter-spacing:.15em; margin-bottom:20px; }
.home .story-scorecard span { display:block; border-bottom:1px solid #bdc7bd; padding:9px 0; font-size:13px; }
.home .story-scorecard strong { position:absolute; right:20px; bottom:17px; font:700 30px Georgia,serif; }
.home .story-die { position:absolute; top:230px; left:calc(50% - 175px); width:110px; height:110px; display:grid; place-items:center; background:#f2eee3; border:1px solid #fff; border-radius:18px; color:#3e9e91; font-size:74px; line-height:1; box-shadow:0 11px 0 #abb9af,0 27px 25px #0008; transform:rotateZ(-14deg) rotateX(10deg) translateZ(88px); }
.home .story-die:nth-child(3) { top:270px; left:calc(50% - 55px); width:89px; height:89px; font-size:60px; transform:rotateZ(18deg) translateZ(101px); }
.home .story-cup { position:absolute; top:110px; left:calc(50% - 123px); width:222px; height:235px; clip-path:polygon(6% 0,94% 0,77% 100%,23% 100%); background:linear-gradient(110deg,#306976,#5da2a4 43%,#2d616c 75%,#183b49); box-shadow:0 25px 24px #0008; transform:rotateZ(-12deg) rotateY(-10deg) translateZ(85px); }
.home .story-cup span { position:absolute; top:5px; left:3%; width:94%; height:34px; border:6px solid #a6d3cc; border-radius:50%; background:#163943; }
.home .story-bluff .story-die { top:282px; left:calc(50% + 36px); width:80px; height:80px; font-size:53px; color:#459c9b; transform:rotateZ(16deg) translateZ(105px); }
.home .story-bluff .story-die:nth-child(3) { top:308px; left:calc(50% + 128px); width:66px; height:66px; font-size:45px; transform:rotateZ(-12deg) translateZ(103px); }
.home .story-bid { position:absolute; top:91px; left:calc(50% + 61px); padding:13px 17px; background:#f2eee3; color:#19333d; border-radius:13px; font-weight:800; transform:rotateZ(6deg) translateZ(119px); box-shadow:7px 13px 19px #0007; }
.home .story-bid::after { content:""; position:absolute; bottom:-13px; left:28px; border-top:15px solid #f2eee3; border-right:18px solid transparent; }
.home .story-sea { position:absolute; top:122px; left:calc(50% - 192px); width:384px; height:270px; border:10px solid #416b7b; border-radius:15px; background-color:#203f50; background-image:linear-gradient(#96c1ca3b 1px,transparent 1px),linear-gradient(90deg,#96c1ca3b 1px,transparent 1px); background-size:38px 38px; transform:rotateX(35deg) rotateZ(-8deg) translateZ(55px); box-shadow:0 13px 0 #17303b,0 33px 30px #0008; }
.home .story-vessel { position:absolute; top:105px; left:60px; width:195px; height:48px; background:#c6d8d8; clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%); box-shadow:0 8px 0 #849ca0; }
.home .story-vessel::after { content:""; position:absolute; width:82px; height:34px; left:56px; top:7px; border-radius:5px; background:#f2eee3; }
.home .story-sea b { position:absolute; right:65px; top:40px; font:700 65px Georgia,serif; color:#ed9787; }
.home .story-sea i { position:absolute; right:93px; bottom:38px; font:700 66px Georgia,serif; color:#9bc6d2; }
.home .story-target { position:absolute; left:calc(50% + 109px); top:92px; padding:10px 22px; background:#f2eee3; color:#203f50; border-radius:5px; font:700 31px Georgia,serif; letter-spacing:.08em; transform:rotateZ(9deg) translateZ(93px); box-shadow:5px 10px 17px #0007; }

/* The rest of the page reads like the app's catalogue, then shows real UI. */
.home .promise-strip { background: var(--deep); }
.home .promise-strip b { color: var(--gold); }
.home .section { padding-block: 104px; }
.home .section-heading > p { font-size: 15px; }
.home .game-grid { gap: 20px; }
.home .game-card { background: var(--surface); border-color: var(--line); border-radius: 10px; transition: transform .25s,box-shadow .25s,border-color .25s; }
.home .game-card:hover { transform: translateY(-7px); border-color: #718072; box-shadow: 0 20px 40px #0004; }
.home .game-art { height: 226px; background: #382f2c; }
.home .game-risk .game-art { background: #342c40; }
.home .game-words .game-art { background: #3c3a2c; }
.home .game-dice .game-art { background: #2c3b34; }
.home .game-bluff .game-art { background: #283b39; }
.home .game-ships .game-art { background: #283842; }
.home .game-category { color: var(--ink); opacity: .8; }
.home .art-cards img { top: 60px; width: 93px; left: calc(50% - 46px); filter: drop-shadow(0 13px 12px #0007); }
.home .game-copy { padding: 25px; }
.home .game-copy h3 { color: var(--ink); font-family: Georgia,serif; font-size: 24px; font-weight: 400; }
.home .game-copy p { font-size: 13px; }
.home .game-copy summary { color: var(--gold); min-height: 44px; }
.home .letter-tile { box-shadow: 0 8px 0 #a78351,0 16px 15px #0005; }
.home .die { box-shadow: 0 7px 0 #aebbb0,0 17px 17px #0005; }
.home .how-section { background: var(--deep); }
.home .invite-ticket { background: var(--surface); border-color: var(--gold); color: var(--ink); }
.home .how-steps li { border-color: var(--line); }
.home .how-steps li > span { color: var(--gold); }
.home .table-section { padding-top: 0; }
.home .table-switch { background: var(--surface); }
.home .table-switch button[aria-pressed="true"] { background: var(--gold); color: var(--deep); }
.home .table-preview { background: var(--surface); }
.home .preview-toolbar i { background: #a9c1a0; }
.home .download-section { background: radial-gradient(circle at 50% 0%,#344036,var(--deep) 72%); border:1px solid var(--line); margin-top: 20px; }
.home .download-section .eyebrow,.home .download-spark { color: var(--gold); }
.home .download-section > p:not(.eyebrow) { color: var(--muted); }
.home .stores a { background: var(--gold); color: var(--deep); }
.home .stores a:hover { background: #f2d5a2; }
.home .privacy-strip strong { color: var(--ink); }
.home .site-footer { background: var(--deep); }

@media (max-width: 1100px) {
  .home .hero { grid-template-columns: 1fr 1fr; gap: 25px; }
  .home .hero h1 { font-size: clamp(3.5rem,6vw,5rem); }
  .home .scene-switch { padding: 8px; }
}
@media (max-width: 800px) {
  .home .hero { grid-template-columns: 1fr; padding-block: 60px 70px; }
  .home .hero-copy { max-width: 620px; }
  .home .card-stage { height: 470px; }
  .home .section { padding-block: 72px; }
}
@media (max-width: 520px) {
  .home .hero h1 { font-size: clamp(3.3rem,12vw,4.8rem); }
  .home .hero { padding-block: 44px 54px; }
  .home .hero-note { margin-top: 30px; }
  .home .scene-switch { padding: 8px; }
  .home .scene-switch button { font-size: 11px; min-height: 38px; }
  .home .card-stage { height: 340px; }
  .home .stage-mat { top: 112px; height: 220px; border-radius: 16px; }
  .home .stage-mat span { height: 85px; }
  .home .show-card { top: 90px; left: calc(50% - 45px); width: 90px; transform:translateX(calc((var(--i) - 2)*37px)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*7px)) translateZ(calc(20px + var(--i)*7px)) rotateZ(calc((var(--i) - 2)*13deg)); }
  .home .card-stage:hover .show-card { transform:translateX(calc((var(--i) - 2)*40px)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*5px - 4px)) translateZ(calc(22px + var(--i)*8px)) rotateZ(calc((var(--i) - 2)*14deg)); }
  .home .scene-label { top: 18px; left: 18px; font-size: 8px; }
  .home .round-sticker { right: 17px; bottom: 17px; padding: 8px 11px; font-size: 10px; }
  .home .story-scene { transform: scale(.64); transform-origin: center 42%; }
  .home .hero-game figcaption { display: block; padding: 16px; }
  .home .hero-game figcaption a { display: block; margin-top: 6px; }
  .home .section { padding-block: 58px; }
  .home .game-art { height: 195px; }
  .home .game-copy { padding: 20px; }
  .home .game-copy h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .card-world { transform: none !important; transition: none; }
  .home .show-card,.home .story-scene,.home .game-card { transition: none; }
  .home .game-card:hover { transform: none; }
}