:root{--wood: #2d5016;--wheat: #daa520;--sheep: #7cb342;--brick: #b84c35;--ore: #5c6370;--desert: #d4a574;--ocean: #1a5276;--ocean-light: #2980b9;--sand: #f4d03f;--text-dark: #1a1a2e;--text-light: #fefefe}*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}body{font-family:Crimson Pro,Georgia,serif;background:#87ceeb;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:20px;overflow-x:hidden;position:relative;width:100%;max-width:100vw}header{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,20px);margin-bottom:15px;position:relative;z-index:1;background:#fff;padding:15px 25px;border-radius:10px;box-shadow:0 2px 10px #0000001a}.logo{width:clamp(35px,8vw,80px);height:clamp(35px,8vw,80px);border-radius:50%;object-fit:cover;box-shadow:0 4px 15px #0006;flex-shrink:0}h1{font-family:Cinzel,serif;font-size:clamp(1rem,5vw,3rem);color:#1a5276;letter-spacing:clamp(2px,1vw,8px);margin:0;text-transform:uppercase;font-variant:small-caps;white-space:nowrap}.subtitle{color:#ffffffb3;font-size:.95rem;font-weight:400;font-style:italic}.controls{display:flex;gap:15px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:10px;margin-top:0;position:relative;z-index:1}.btn{font-family:Cinzel,serif;font-size:.85rem;font-weight:600;padding:10px 25px;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px}.btn-primary{background:var(--sand);color:var(--text-dark);box-shadow:0 3px 10px #0000004d}.btn-primary:hover{transform:translateY(-2px);background:#e8c842;box-shadow:0 5px 20px #0006}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#0006;color:var(--text-light);border:1px solid rgba(255,255,255,.2);box-shadow:0 3px 10px #0000004d}.btn-secondary:hover:not(:disabled){background:#00000080;transform:translateY(-2px);box-shadow:0 5px 20px #0006}.btn-secondary:active:not(:disabled){transform:translateY(0)}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.layout-info{background:#0006;padding:10px 20px;border-radius:6px;color:var(--text-light);font-size:.85rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.board-container{position:relative;z-index:1;padding:20px}.board{display:flex;flex-direction:column;align-items:center;gap:0}.hex-row{display:flex;justify-content:center;margin-top:-36px}.hex-row:first-child{margin-top:0}.hex{width:130px;height:150px;position:relative;margin:0 1px;cursor:default;transition:transform .2s ease}.hex:hover{transform:scale(1.05);z-index:10}.hex-inner{width:100%;height:100%;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.hex-border{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#000;z-index:-1}.terrain-wood .hex-inner{background:var(--wood)}.terrain-wheat .hex-inner{background:var(--wheat)}.terrain-sheep .hex-inner{background:var(--sheep)}.terrain-brick .hex-inner{background:var(--brick)}.terrain-ore .hex-inner{background:var(--ore)}.terrain-desert .hex-inner{background:var(--desert)}.resource-icon{font-size:2rem;margin-bottom:5px;margin-top:-15px;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.4))}.number-token{width:52px;height:52px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-weight:700;font-size:1.5rem;color:var(--text-dark);box-shadow:0 3px 8px #0006;position:relative;margin-top:0}.number-token.red-number{color:#c41e3a}.probability-dots{display:none}.desert-icon{font-size:2.5rem;color:#8b451399}.legend{margin-top:30px;display:grid;grid-template-columns:repeat(6,auto);gap:8px 16px;padding:12px 20px;background:#0000004d;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);position:relative;z-index:1;width:fit-content;margin-left:auto;margin-right:auto}.legend-item{display:flex;align-items:center;gap:5px;color:var(--text-light);font-size:.85rem;white-space:nowrap}@media (max-width: 700px){.legend{grid-template-columns:repeat(3,auto)}}@media (max-width: 400px){.legend{grid-template-columns:repeat(2,auto)}}.legend-color{width:24px;height:24px;border-radius:4px;box-shadow:0 2px 4px #0000004d;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}.legend-color.wood{background:var(--wood)}.legend-color.wheat{background:var(--wheat)}.legend-color.sheep{background:var(--sheep)}.legend-color.brick{background:var(--brick)}.legend-color.ore{background:var(--ore)}.legend-color.desert{background:var(--desert)}.probability-guide{margin-top:20px;text-align:center;color:#ffffffb3;font-size:.9rem;position:relative;z-index:1}.probability-guide strong{color:#c41e3a}footer{margin-top:40px;margin-bottom:20px;color:#000;font-size:.85rem;text-align:center;position:relative;z-index:1;padding:0 20px}@media (max-width: 768px){.hex{width:90px;height:104px}.hex-row{margin-top:-25px}.number-token{width:38px;height:38px;font-size:1.1rem}.resource-icon{font-size:1.5rem;margin-top:-10px;margin-bottom:3px}.board-container{padding:20px}}@media (max-width: 500px){.hex{width:65px;height:75px}.hex-row{margin-top:-18px}.number-token{width:28px;height:28px;font-size:.9rem}.resource-icon{font-size:1rem;margin-top:-8px;margin-bottom:2px}}@keyframes hexAppear{0%{opacity:0;transform:scale(.8) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.hex.animate{animation:hexAppear .4s ease-out forwards}