:root{--ink:#382f2b;--sub:#826e5e;--cream:#f4e8cf;--paper:#fffaf0;--accent:#b86753;--gold:#facb6e;--line:#cdb79b;--bark:#806852;--pale:#e9d4b2}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{font-family:ui-rounded,"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4e8cf;color:var(--ink);-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none}button:focus-visible{outline:3px solid #e2a54e;outline-offset:3px}.app{width:min(950px,100%);margin:auto;display:flex;flex-direction:column;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 13px calc(env(safe-area-inset-bottom) + 12px);min-height:100dvh}
.masthead{display:flex;gap:16px;align-items:center;justify-content:space-between}.identity{display:flex;align-items:center;gap:10px;min-width:0}.logo{width:46px;height:47px;flex:none;display:grid;place-items:center;border:2px solid #795640;border-radius:10px;background:#efc577;box-shadow:3px 3px 0 #c49b67}.logo span{font-size:31px;color:#6f4e41;transform:rotate(-12deg)}h1{font-weight:1000;margin:2px 0 0;font-size:clamp(23px,4vw,31px);letter-spacing:.3px;line-height:1}h1 span{font-size:12px;vertical-align:top;color:#a96353;letter-spacing:0;background:#ffe6c1;padding:3px 5px;border-radius:4px}.kicker{font-size:9px;font-weight:950;letter-spacing:1.6px;color:#a87356}.hud{display:flex;gap:5px}.hud>div{background:var(--paper);border:1px solid #dec6a6;box-shadow:2px 3px 0 #d8c2a2;border-radius:9px;padding:5px 8px;text-align:center;min-width:60px}.hud small{display:block;font-size:9px;letter-spacing:1.2px;color:#a28b73;font-weight:900}.hud b{font-size:13px;font-weight:1000;white-space:nowrap}
.world-panel{position:relative;height:clamp(330px,52dvh,540px);min-height:310px;background:#b9e0de;overflow:hidden;border:5px solid #fff8e8;outline:2px solid #bfa889;border-radius:15px;box-shadow:0 11px 0 #dfc7a7,0 18px 32px #65503b22;isolation:isolate}#world{width:100%;height:100%;display:block;touch-action:none}.world-top{position:absolute;z-index:2;left:11px;top:11px;right:11px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:8px}.place-chip{display:flex;gap:8px;align-items:center;background:#fff9edee;border:2px solid #d5bfa0;border-radius:8px;padding:7px 12px;color:#5a4838;box-shadow:2px 3px 0 #826d5436}.place-chip small{display:block;font-size:9px;font-weight:950;letter-spacing:1.25px;color:#aa896f}.place-chip b{display:block;margin-top:2px;font-size:14px}.circle-dot{width:9px;height:9px;border-radius:100%;background:#74a08b;border:2px solid white;box-shadow:0 0 0 2px #90bda3}.round-icon{pointer-events:auto;white-space:nowrap;border:2px solid #c5ac8c;background:#fff9e9f2;border-radius:8px;font-size:17px;font-weight:950;padding:9px 11px;box-shadow:2px 3px 0 #81684a35}.round-icon span{font-size:12px}.floating-tip{position:absolute;z-index:2;bottom:11px;left:50%;transform:translateX(-50%);min-width:min(280px,90%);max-width:94%;text-align:center;font-size:12px;font-weight:900;color:#654e3c;background:#fff9eedd;border:2px solid #e7d6b5;box-shadow:2px 3px 0 #6b5b4d24;padding:8px 13px;border-radius:7px;pointer-events:none}.toast{display:none;position:absolute;z-index:3;top:60px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:12px 15px;border:2px solid #fff9e8;border-radius:8px;background:#ffe6a7;color:#674c36;box-shadow:2px 5px 0 #876c4240;font-weight:900;font-size:13px;text-align:center}.toast.visible{display:block}
.control-panel{background:#fff8eb;border:2px solid #d8c1a2;border-radius:14px;padding:11px;box-shadow:0 5px 0 #e3cfb1}.control-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}.nowmode{display:flex;gap:9px;align-items:center}.nowmode>span{font-size:26px}.nowmode small{font-weight:1000;letter-spacing:1.4px;font-size:10px;color:#ad785c;display:block}.nowmode strong{font-size:13px}.route-score{border:1px solid #e4cead;background:#f4e4c7;padding:7px 9px;border-radius:7px;font-weight:900;font-size:10px;white-space:nowrap}.controls{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:9px}.controls button{height:66px;border-radius:9px;border:2px solid #957b60;font-weight:1000;font-size:20px;box-shadow:0 4px 0 #b8a081;background:#f3dfbc;touch-action:none}.controls button small{display:block;font-size:8px;margin-top:2px;letter-spacing:1.1px}.controls .action{font-size:14px;background:#edbf78;box-shadow:0 4px 0 #b7864f;border-color:#986943;padding:4px}.controls button.pressed,.controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #ac8d67}.shortcut-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:12px}.shortcut-row button{border:1px solid #dfc8aa;background:#fffdf5;border-radius:8px;padding:11px 5px;font-size:13px;font-weight:900;white-space:nowrap}.shortcut-row span{font-size:11px}footer{font-size:11px;color:#927b66;display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding:4px 0}
.overlay{position:fixed;inset:0;background:#3e3028a1;display:grid;align-items:center;justify-items:center;padding:20px 12px;z-index:10;overflow:auto}.overlay[hidden]{display:none}.sheet{position:relative;width:min(460px,100%);max-height:min(90dvh,760px);overflow:auto;padding:24px 20px 20px;background:#fff9ec;border:4px solid #fbe5bd;outline:2px solid #97755c;border-radius:13px;box-shadow:0 14px 0 #59433355,0 26px 55px #281a1755}.sheet-close{position:absolute;right:10px;top:9px;width:32px;height:32px;background:#f3dfc0;border:1px solid #d3b68d;border-radius:7px;font-size:23px;line-height:1;display:grid;place-items:center}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:1000;color:#b47d59;margin:2px 0 8px}.sheet h2{font-size:24px;line-height:1.15;margin:7px 25px 12px 0;letter-spacing:-.3px}.sheet p{line-height:1.55;font-size:14px;color:#79624d;margin:9px 0 15px}.sheet h3{font-size:13px;margin:17px 0 5px}.primary,.secondary{display:block;width:100%;border-radius:8px;padding:13px 14px;font-weight:950;font-size:14px;margin-top:9px;text-align:center}.primary{background:#edbf78;border:2px solid #ba8251;box-shadow:0 3px 0 #bf9360}.secondary{background:#fff7e6;border:2px solid #d7bea0}.primary:active,.secondary:active{transform:translateY(2px);box-shadow:none}.tipcard{background:#f3e4cb;border-left:4px solid #d5a467;border-radius:5px;padding:12px 13px;margin:12px 0;font-size:12px;line-height:1.6;color:#715943}.line-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 3px;border-bottom:1px solid #ecd6b6}.line-item strong{display:block;font-size:13px}.line-item small{display:block;font-size:11px;color:#987e65;margin-top:3px}.line-item .itemright{font-weight:1000;color:#ac7d55;white-space:nowrap;font-size:12px}.line-item.done{opacity:.55}.maptrack{position:relative;height:34px;background:linear-gradient(#f8e9cd,#ecd5b0);border:2px solid #d8b891;border-radius:7px;margin:21px 5px 28px}.maproad{position:absolute;top:15px;left:5%;right:5%;height:3px;background:#b59c80}.map-pin{position:absolute;top:5px;font-size:23px;transform:translateX(-50%)}.map-van{position:absolute;top:-16px;font-size:22px;transform:translateX(-50%)}.maplegend{display:flex;gap:6px;flex-wrap:wrap;justify-content:space-between}.maplegend>div{background:#f5e6ce;border:1px solid #e2c9a5;border-radius:7px;padding:8px 9px;font-size:11px;flex:1;min-width:100px}.maplegend strong{display:block}.maplegend small{color:#98795f;font-size:10px}.human-portrait{display:grid;place-items:center;width:70px;height:70px;font-size:42px;border:3px solid #bda184;border-radius:9px;background:#f0e3ca;flex-shrink:0}.villager-intro{display:flex;gap:13px;align-items:center;background:#f8e9d2;border-radius:8px;padding:10px;margin:13px 0}.villager-intro p{margin:4px 0!important}.options{display:grid;gap:8px;margin-top:14px}.smallpill{display:inline-block;background:#f3d6a6;padding:5px 9px;border-radius:5px;font-size:11px;color:#815838;font-weight:950}
@media(max-width:650px){.app{gap:9px;padding-left:9px;padding-right:9px}.masthead{gap:9px;align-items:flex-start}.logo{width:38px;height:39px}.logo span{font-size:23px}h1{font-size:23px}.kicker{font-size:8px;letter-spacing:1px}.hud>div{min-width:47px;padding:4px 5px}.hud small{font-size:8px}.hud b{font-size:11px}.world-panel{height:min(51dvh,470px);min-height:310px}.shortcut-row span{font-size:10px}footer span{display:none}}
@media(max-width:390px){.logo{display:none}.hud>div{min-width:43px}.world-panel{height:49dvh}.controls button{height:62px}.shortcut-row button{padding:10px 3px;font-size:11px}}
@media(orientation:landscape) and (max-height:550px){.app{gap:5px}.masthead{align-items:center}.world-panel{height:58dvh;min-height:180px}.control-panel{padding:6px}.controls button{height:40px}.control-head{margin-bottom:3px}.shortcut-row{display:none}footer{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* v0.5: lebendiger, stärkeres Spiel-Fenster, weniger Rahmen */
body{background:linear-gradient(180deg,#d2e5dd 0%,#f5e9d2 55%,#f2e4cd 100%)}
.world-panel{border:4px solid #fff5db;outline:2px solid #c49d68;box-shadow:0 7px 0 #c49d6888,0 17px 35px #46321f2e;min-height:370px;height:clamp(390px,60dvh,660px)}
.story-ribbon{position:absolute;top:72px;left:11px;z-index:2;background:#ffe7adf2;color:#67472d;border:1px solid #bb8e60;border-radius:5px;padding:5px 8px;font-size:10px;font-weight:900;max-width:85%;pointer-events:none;box-shadow:1px 2px 0 #996b4c44}
.world-top{top:8px;left:8px;right:8px}.place-chip{background:#fff9e9ed}.floating-tip{bottom:8px;background:#fff7e1e9}
.hud>div{background:#fff9eae8}.app{max-width:950px}
.sheet{border-color:#f2d5a5}
.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.puzzle-box{height:100px;background:linear-gradient(140deg,#ddb882,#b98757);border:3px solid #8e6247;border-radius:6px;box-shadow:inset 0 7px #f2d19a,0 4px #99724f;color:#513d2b;font-size:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;font-weight:1000;min-width:0;white-space:normal;padding:5px}
.puzzle-box:active{transform:translateY(3px)}.puzzle-box span{font-size:26px}
.stamp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:13px 0}.stamp-card{padding:10px;background:#f7e9ce;border:2px dashed #bd9f78;text-align:center;border-radius:7px;font-size:12px;color:#66503e}.stamp-card b{display:block;font-size:25px;margin-bottom:6px}
.shop-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #ddc4a0}.shop-item .desc{flex:1}.shop-item small{display:block;font-size:12px;color:#806a52;margin-top:3px}.shop-item button{border:2px solid #bb9160;background:#f5cf91;border-radius:6px;padding:9px 8px;font-size:11px;font-weight:1000;min-width:70px}.shop-item button[disabled]{opacity:.55}
.sign-pad{width:100%;height:114px;display:block;touch-action:none;background:repeating-linear-gradient(0deg,#fffdf6,#fffdf6 35px,#c8c5b9 36px);border:2px solid #bda98d;border-radius:7px;margin:8px 0}.mini-note{font-size:12px;color:#7f7059;line-height:1.5}
@media(max-width:650px){.world-panel{height:56dvh;min-height:355px}.story-ribbon{top:61px}.world-top .place-chip{padding:6px 8px}}
@media(max-width:390px){.world-panel{height:54dvh;min-height:355px}}
@media(orientation:landscape) and (max-height:550px){.world-panel{min-height:220px;height:60dvh}}