:root{--ink:#242d49;--soft:#69748c;--paper:#fcf8ec;--sun:#f7cf53;--orange:#ed7440;--line:#e6e1d5}
body{color:var(--ink);background:radial-gradient(circle at 12% 2%,#ffe9b0 0,transparent 26%),radial-gradient(circle at 91% 21%,#e5e9fa 0,transparent 28%),#faf7ef}
.shell{max-width:1200px;padding-top:28px}
.top{position:relative;z-index:2;padding:2px 0 17px;border-bottom:2px solid #242d491a;margin-bottom:32px}
.brand{font-family:'Trebuchet MS',Arial,sans-serif;text-transform:uppercase;font-size:27px;letter-spacing:-.075em;font-weight:900;transform:rotate(-2deg);display:inline-block}
.brand span{color:var(--orange)}
.badge{background:#fff;border:1px solid var(--line);box-shadow:3px 4px 0 #242d4912;color:#4c5973;padding:9px 15px}
.hero{grid-template-columns:minmax(0,1.05fr) minmax(380px,.75fr);gap:60px;min-height:650px;align-items:center;padding:25px 0 60px}
.hero>div:first-child{position:relative;z-index:1}
.hero>div:first-child:before{content:'';position:absolute;width:180px;height:180px;border:24px solid #f6d15b66;border-radius:50%;z-index:-1;top:-70px;left:-55px}
.eyebrow{color:#c75b31;background:#ffebcf;padding:8px 12px;display:inline-block;border-radius:6px;letter-spacing:.12em;transform:rotate(-2deg)}
.hero h1{font-family:'Trebuchet MS',Arial,sans-serif;font-size:clamp(52px,6vw,83px);letter-spacing:-.085em;line-height:.95;margin:22px 0 26px;max-width:690px;font-weight:900}
.hero h1 em{color:var(--orange);font-style:normal;position:relative}
.hero h1 em:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:8px;background:#f7ce52;border-radius:80%}
.lead{font-size:19px;color:#4d5a73;max-width:540px;margin-bottom:12px}
.hero .muted{max-width:500px}
.hero .card{border:2px solid var(--ink);border-radius:24px;background:#fffefb;box-shadow:11px 12px 0 var(--ink);padding:32px;transform:rotate(1deg)}
.hero .card h2{font-size:32px;margin:0 0 17px}
.hero .field{border:2px solid #d8d5ce;background:#fffefa;border-radius:10px;padding:14px}
.hero .field:focus{outline:3px solid #f6d15b80;border-color:var(--orange)}
.btn{background:var(--orange);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);border-radius:10px;transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover:not(:disabled){transform:translate(1px,2px);box-shadow:2px 2px 0 var(--ink);filter:brightness(1.05)}
.btn:active:not(:disabled){transform:translate(3px,4px);box-shadow:none}
.btn.dark{background:var(--ink)}
.btn.light{background:#f4f2ea;color:var(--ink)}
.hero .btn.full{padding:15px}
.hero .divider{background:#ddd7ca}
.hero-preview{width:min(555px,95%);margin:42px 0 0 8px;background:#29344f;border:2px solid #1d2740;border-radius:17px;padding:16px 18px 13px;box-shadow:9px 10px 0 #d7cba8;transform:rotate(-3deg)}
.preview-copy{display:flex;justify-content:space-between;gap:8px;color:#fff;margin-bottom:10px;font-size:11px;font-weight:900;letter-spacing:.07em}
.preview-copy strong{color:#f2d66c}
.preview-tiles{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.preview-tiles i{aspect-ratio:1;border:1px solid #24304455;border-radius:3px;display:grid;place-items:center;font:900 23px Arial,sans-serif;color:#26324b;font-style:normal;box-shadow:inset 0 2px 0 #ffffff75}
.tile-G{background:#5fbd58}.tile-Y{background:#ffd12f}.tile-B{background:#4cace3}.tile-O{background:#f58734}.tile-P{background:#e65d9b}
.preview-dice{display:flex;align-items:center;gap:8px;margin-top:11px;color:#f4db8c;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.preview-die{width:30px;height:30px;background:#fff;color:#26314a;display:grid;place-items:center;border-radius:6px;font-size:19px;box-shadow:2px 2px 0 #0e182c}
.gamehead{background:#26334f;border-radius:20px;color:#fff;padding:20px 25px;box-shadow:7px 8px 0 #e1d8c6;margin-bottom:25px}
.gamehead h1{font-size:42px;margin:4px 0;letter-spacing:-.06em}
.gamehead .eyebrow{background:#ffdc7e;color:#7f432a;font-size:11px}
.gamehead .muted{color:#d4dce9;margin:6px 0 0}
.gamehead .btn{background:#ffda66;color:var(--ink);border-color:#fff;box-shadow:3px 3px 0 #0a1226}
.layout{grid-template-columns:minmax(0,1fr) 275px;gap:22px}
.stack{gap:20px}
.layout .card{border:2px solid #dfd9cc;background:#fffdfa;box-shadow:6px 7px 0 #e7dfce;padding:24px}
.layout .card h2{font-size:28px;margin-top:0}
.layout .card h3{font-size:22px;margin-top:0}
.dice{gap:10px;margin:12px 0 21px}
.roll-dice-grid{display:flex;gap:22px;flex-wrap:wrap}
.dice-group strong{display:block}
.die{border:2px solid var(--ink);border-radius:12px;box-shadow:4px 5px 0 #2c365230;width:58px;height:58px;position:relative}
.die.G,.cell.G{background:#5fbd58}.die.Y,.cell.Y{background:#ffd12f}.die.B,.cell.B{background:#4cace3}.die.O,.cell.O{background:#f58734}.die.P,.cell.P{background:#e65d9b}
.die.G,.die.Y,.die.B,.die.O,.die.P{font-size:29px}
.die.G:empty:after,.die.Y:empty:after,.die.B:empty:after,.die.O:empty:after,.die.P:empty:after{content:'●';color:#fff;filter:drop-shadow(1px 2px 0 #23314e66)}
.die.selected{border:3px solid #ed7440;box-shadow:0 0 0 3px #ffd173,4px 5px 0 #2c365230;transform:translateY(-2px)}
.die.taken{filter:grayscale(.85);opacity:.35}
.die.star{background:#29344f;color:#ffdf6e}
.chip,.tab{border:2px solid #ddd8ca;border-radius:9px;background:#fffdf8;box-shadow:2px 2px 0 #d7d3c8;padding:9px 12px}
.chip.on,.tab.on{border-color:var(--orange);background:#fff0d2;color:#8e3f22;box-shadow:3px 3px 0 #efbe7b}
.board-wrap{background:#28334d;border-radius:13px;padding:12px;box-shadow:inset 0 2px 8px #0c142a66;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.board{gap:3px;min-width:480px}
.col{color:#fff;background:#364462;border-radius:5px;padding:6px 0}
.col.start{color:#24324b;background:#ffda66}
.cell{position:relative;border:1px solid #34405788;border-radius:5px;box-shadow:inset 0 2px 0 #ffffff88;color:#1d2b45;transition:transform .1s,filter .1s}
.cell.star::before{content:'★';position:absolute;inset:0;display:grid;place-items:center;font-size:25px;color:#1c2c47;text-shadow:0 1px 0 #ffffffaa;line-height:1}
.cell:hover:not(:disabled){transform:scale(1.1);z-index:2;filter:brightness(1.08)}
.cell.picked{outline:3px solid #fff;outline-offset:-4px;box-shadow:0 0 0 2px #26314b,inset 0 2px 0 #ffffff88}
.cell.marked{background-image:linear-gradient(135deg,#17213dbb,#17213d9c);border:2px solid #f9f5e9;box-shadow:inset 0 0 0 2px #1b274480}
.cell.marked::after{content:'✕';font-family:'Trebuchet MS',Arial,sans-serif;font-size:26px;line-height:1;color:#fff;transform:rotate(-7deg);text-shadow:1px 2px 0 #10182c}
.cell.marked.star::before{display:block!important;inset:auto;top:-3px;right:1px;color:#ffe46a;font-size:19px;text-shadow:1px 2px 0 #10182c}
.points{color:#fff;background:#364462;border-radius:5px;padding:5px 0}
.points small{color:#bfc9d9}
.points.complete{background:#3d7046;color:#fff}
.column-strike{position:relative;z-index:3;pointer-events:none}
.column-strike::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);background:#23314a;box-shadow:0 0 0 2px #fff;opacity:.88}
.column-awards{display:grid;gap:9px;margin-top:16px;padding:14px;border:1px solid #ded8c9;border-radius:12px;background:#fbf7ed}
.column-awards>strong{font-size:14px;color:#26334d}
.column-awards>div{display:flex;flex-wrap:wrap;gap:7px}
.score-details>summary{display:none}
.mobile-scoreboard{display:none}
.award,.color-award{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #d8dce1;border-radius:8px;background:#fff;color:#45536b;font-size:12px;font-weight:700}
.award.first{background:#fff1bd;border-color:#e6b548;color:#705020}
.color-award.done{background:#e6f2df;border-color:#73ad5b;color:#315d2b}
.swatch{width:11px;height:11px;border:1px solid #26334d55;border-radius:3px;flex:none}
.swatch.G{background:#5fbd58}.swatch.Y{background:#ffd12f}.swatch.B{background:#4cace3}.swatch.O{background:#f58734}.swatch.P{background:#e65d9b}
.free-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:11px 13px;background:#edf1fa;border-left:4px solid #40577e;border-radius:8px;font-size:13px;color:#32415d}
.board-swipe{display:none}
.player{background:#f8f5ed;border:1px solid #e4dfd3}
.player.active{background:#fff0d2;border:2px solid #ec9e51}
.score{color:#24314b}
.result{border:2px solid #17213b;box-shadow:6px 6px 0 #efb25e;background:#2a3653}
.move-hint{background:#fff4d5;border-left:5px solid #efa43f;border-radius:8px;padding:11px 13px;color:#6b4829;font-size:14px;font-weight:700;line-height:1.4;margin:12px 0 17px}
.move-hint.invalid{background:#ffe8dd;border-color:#e36a3c;color:#9d3929}
.footer{margin-top:42px}
.cell,.die,.chip,.btn,.tab{touch-action:manipulation}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:30px;padding-top:5px}.hero .card{max-width:520px;transform:none}.layout{grid-template-columns:1fr}.hero-preview{margin-top:34px}}
@media(max-width:600px){.shell{padding:16px 13px 35px}.top{margin-bottom:20px}.brand{font-size:22px}.badge{font-size:11px;max-width:155px;text-align:center}.hero h1{font-size:clamp(44px,11vw,63px)}.hero .card{padding:22px;box-shadow:6px 7px 0 var(--ink)}.hero-preview{width:100%;margin-left:0;padding:11px;transform:rotate(-2deg)}.preview-copy{font-size:9px}.preview-tiles{gap:2px}.preview-tiles i{font-size:14px}.gamehead{padding:17px}.gamehead h1{font-size:31px}.layout .card{padding:16px}.board-wrap{margin:0 -6px;padding:8px}.board{min-width:450px}.die{width:52px;height:52px}}
@media(max-width:600px){.board-note::before{content:'↔ Für weitere Spalten seitlich wischen';width:100%;font-weight:800;color:#dc662e}.cell.star::before{font-size:22px}.cell.marked.star::before{font-size:16px}}
@media(max-width:600px){.layout .card{min-width:0}.board-swipe{display:block;margin:5px 0 9px;color:#bd5d29;font-size:13px;font-weight:800}.board-wrap{max-width:100%;overflow-x:auto;scrollbar-color:#ffcf54 #26334e}.board{min-width:686px;grid-template-columns:repeat(15,42px);gap:4px}.cell{min-width:42px;min-height:42px}.die{min-width:54px;min-height:54px}.btn{min-height:44px}.column-awards{padding:11px}}
@media(max-width:600px){.layout>.stack:first-child>.card:first-child h2{display:none}.turn-context{font-size:12px;line-height:1.35;margin:0 0 10px}.roll-dice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dice{gap:5px;margin:6px 0 10px;flex-wrap:nowrap}.die{width:44px;height:44px;min-width:44px;min-height:44px;font-size:19px}.dice-group strong{font-size:13px}.layout>.stack:first-child>.card:first-child{padding:14px}.layout>.stack:first-child>.card:first-child .muted{margin:3px 0 9px;font-size:12px}}
@media(max-width:600px){body:has(.board-wrap) .shell{padding:5px 7px 20px}body:has(.board-wrap) .top{display:none}body:has(.board-wrap) .layout{gap:8px}body:has(.board-wrap) .stack{gap:8px}body:has(.board-wrap) .layout .card{padding:9px;box-shadow:none;border-radius:12px}body:has(.board-wrap) .layout>aside{display:none}body:has(.board-wrap) .footer{display:none}body:has(.board-wrap) .gamehead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 9px;margin:0 0 8px;border-radius:9px;box-shadow:none}body:has(.board-wrap) .gamehead .eyebrow,body:has(.board-wrap) .gamehead .muted{display:none}body:has(.board-wrap) .gamehead h1{font-size:14px;letter-spacing:0;margin:0}body:has(.board-wrap) .gamehead .btn{font-size:11px;padding:5px 8px;min-height:30px;box-shadow:none;border-width:1px}body:has(.roll-dice-grid) .layout>.stack:first-child>.card:first-child h2{display:none}body:has(.board-wrap) .layout>.stack:first-child>.card:nth-child(2)>h2{display:none}body:has(.board-wrap) .layout>.stack:first-child>.card:nth-child(2)>p:last-child{display:none}body:has(.board-wrap) .tabs{margin:0 0 7px}body:has(.board-wrap) .tab{padding:5px 7px;font-size:11px}body:has(.board-wrap) .board-wrap{margin:0;padding:5px}body:has(.board-wrap) .board-swipe{font-size:10px;margin:0 0 4px}body:has(.board-wrap) .board-note{display:none}body:has(.board-wrap) .score-details{margin-top:8px;border:1px solid #dcd6c9;border-radius:9px;background:#f8f4e9}body:has(.board-wrap) .score-details>summary{display:list-item;cursor:pointer;padding:10px 12px;font-size:13px;font-weight:800;color:#26334d}body:has(.board-wrap) .score-details .column-awards{margin:0 7px 8px}body:has(.board-wrap) .mobile-scoreboard{display:block;margin:0 7px 8px;padding:10px;background:#fff;border-radius:8px}body:has(.board-wrap) .mobile-score-row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:13px}body:has(.board-wrap) .mobile-score-row+ .mobile-score-row{border-top:1px solid #e7e1d5}}
@media(max-width:600px){body:has(.board-wrap) .board-swipe,body:has(.board-wrap) .board-note::before{display:none}body:has(.board-wrap) .board-wrap{overflow:visible;max-width:100%}body:has(.board-wrap) .board{width:100%;min-width:0;grid-template-columns:repeat(15,minmax(0,1fr));gap:2px}body:has(.board-wrap) .cell{min-width:0;min-height:0;aspect-ratio:1;border-radius:2px}body:has(.board-wrap) .col{padding:3px 0;font-size:10px;border-radius:2px}body:has(.board-wrap) .points{padding:3px 0;font-size:10px;border-radius:2px}body:has(.board-wrap) .points small{font-size:8px}body:has(.board-wrap) .cell.star::before{font-size:15px}body:has(.board-wrap) .cell.marked::after{font-size:15px}body:has(.board-wrap) .cell.marked.star::before{font-size:10px;top:-2px;right:0}body:has(.board-wrap) .column-strike::after{width:2px;box-shadow:0 0 0 1px #fff}}
@media(max-width:600px){body:has(.board-wrap) .shell{padding-bottom:55px}body:has(.board-wrap) .dice-group>strong{display:none}body:has(.board-wrap) .roll-dice-grid{display:flex;gap:7px;align-items:center;justify-content:space-between}body:has(.board-wrap) .dice{gap:4px;margin:3px 0 5px}body:has(.board-wrap) .die{width:39px;height:39px;min-width:39px;min-height:39px;border-radius:8px;font-size:17px}body:has(.board-wrap) .die.G:empty:after,body:has(.board-wrap) .die.Y:empty:after,body:has(.board-wrap) .die.B:empty:after,body:has(.board-wrap) .die.O:empty:after,body:has(.board-wrap) .die.P:empty:after{font-size:17px}body:has(.board-wrap) .turn-context{font-size:10px;margin:0 0 3px}body:has(.board-wrap) .move-actions{justify-content:flex-end;gap:8px}body:has(.board-wrap) .move-actions .btn{width:42px;height:40px;min-height:40px;padding:0;border-radius:8px;display:grid;place-items:center;font-size:24px;line-height:1}body:has(.board-wrap) .move-actions #submit{background:#37a34f}body:has(.board-wrap) .move-actions #pass{background:#d94745;color:#fff}body:has(.board-wrap) .move-actions .action-word{display:none}body:has(.board-wrap) .move-actions .action-icon{display:block}body:has(.board-wrap) .layout>.stack:first-child>.card:first-child>.muted{display:none}body:has(.board-wrap) .score-details{position:fixed;left:7px;right:7px;bottom:5px;z-index:20;margin:0;box-shadow:0 -3px 14px #17213b33;max-height:70vh;overflow-y:auto}body:has(.board-wrap) .score-details>summary{position:sticky;top:0;background:#f8f4e9;padding:7px 12px;font-size:12px;touch-action:pan-y}body:has(.board-wrap) .score-details>summary::before{content:'⌃';margin-right:7px;font-size:15px}body:has(.board-wrap) .score-details[open]>summary::before{content:'⌄'}}
.action-icon{display:none}