/* MPGA 8.5 — Public demo. Isolated styling: no CSS affects authenticated PlotLuck. */
:root { --demo-gold:#ffd36b; --demo-mint:#74f4cf; --demo-purple:#b19bff; --demo-ink:#030a16; }
html { scroll-behavior:smooth; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:3px solid #fbd76a; outline-offset:3px; }
.demo-shell { width:min(1280px,calc(100% - 32px)); margin:auto; }
.demo-intro { padding:55px 0 26px; text-align:center; }
.demo-eyebrow { font-size:11px; letter-spacing:.17em; font-weight:900; color:#c6ddf2; display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center; }
.demo-spark { color:#ffe178;font-size:22px;text-shadow:0 0 15px #f5bd38; }
.demo-free { display:inline-flex; background:rgba(64,214,166,.10); border:1px solid rgba(103,232,185,.42);padding:5px 9px;border-radius:30px;color:#b5ffe0;letter-spacing:.08em;font-size:10px; }
.demo-intro h1 {font-size:clamp(2.35rem,7vw,5rem); letter-spacing:-.05em;line-height:1.03;margin:16px auto 18px;max-width:920px;text-shadow:0 0 36px rgba(243,214,107,.12);}
.title-accent {background:linear-gradient(115deg,#90f5ff,#ddadff 47%,#ffcd65);-webkit-background-clip:text;background-clip:text;color:transparent;}
.demo-lede {font-size:clamp(1rem,1.9vw,1.17rem);max-width:800px;margin:0 auto;line-height:1.65;color:#e0e8f2;}
.demo-lede strong {color:white;}
.demo-disclaimer {font-size:12px;max-width:810px;margin:16px auto 0;color:#bfcbd9; background:rgba(73,90,115,.11);border:1px solid rgba(143,164,189,.2);border-radius:11px;padding:10px 16px;}
.demo-disclaimer strong {color:#ffe3a2;}
.demo-stage {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.82fr);gap:18px;align-items:start;}
.demo-field,.demo-control {background:linear-gradient(165deg,rgba(21,35,52,.96),rgba(6,13,25,.98));border:1px solid rgba(146,177,208,.22);border-radius:22px;padding:19px;box-shadow:0 18px 55px rgba(0,0,0,.26);min-width:0;}
.demo-field-header {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:15px;}
.micro-label {color:#fbd46c;font-weight:900;font-size:10px;letter-spacing:.12em;}
.demo-field-header h2,.control-heading h2 {margin:5px 0 0;color:#fff;font-size:clamp(1.15rem,2.7vw,1.55rem);}
.grid-readout {border:1px solid #5af6db70;border-radius:9px;padding:6px 9px;color:#aaffee;font-size:12px;font-weight:900;font-family:ui-monospace,monospace;white-space:nowrap;}
.map-frame {position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;min-width:0;aspect-ratio:1.16 / 1;max-height:680px; border-radius:17px;border:2px solid #a3d4f14b; background-color:#d7e7e4; background-image:linear-gradient(12deg,transparent 45%,#eee9d0 46%,#f7f6ec 51%,transparent 52%),linear-gradient(92deg,transparent 31%,#f7f6ec 32%,#f7f6ec 34%,transparent 35%),linear-gradient(19deg,transparent 68%,rgba(134,191,135,.38) 69%,rgba(134,191,135,.38) 83%,transparent 84%),linear-gradient(rgba(70,151,155,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(70,151,155,.09) 1px,transparent 1px);background-size:100% 100%,100% 100%,100% 100%,28px 28px,28px 28px;}
.map-frame:before {position:absolute;inset:0;content:"";background:repeating-linear-gradient(153deg,transparent 0 36px,rgba(255,255,255,.22) 36px 40px,transparent 40px 85px);pointer-events:none;}
.road-name {position:absolute;color:rgba(49,93,104,.65);font-size:clamp(8px,1.4vw,11px);font-weight:800;letter-spacing:.08em;white-space:nowrap;pointer-events:none;}
.road-a {top:16%;left:3%;transform:rotate(-17deg)}.road-b{bottom:27%;right:-15px;transform:rotate(-88deg)}.road-c{bottom:8px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.05em;}
.demo-grid {--side:9; position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--side),minmax(0,1fr));grid-template-rows:repeat(var(--side),minmax(0,1fr));width:min(94%,550px);aspect-ratio:1;gap:1px;}
.plot-cell {position:relative;display:grid;place-items:center;padding:0;min-height:0;min-width:0;background:rgba(249,248,234,.17);border:1px dashed rgba(0,151,218,.65);border-radius:1px;touch-action:manipulation;}
.plot-cell:hover {background:rgba(255,249,207,.54);border-style:solid;}
.plot-cell.is-owned {background:rgba(101,201,227,.23);border:2px solid rgba(25,119,204,.9);box-shadow:inset 0 0 8px rgba(46,139,205,.16);}
.plot-cell.is-selected {outline:2px solid #fcbf40;outline-offset:-2px;}
.plot-cell.is-dug:after {content:'◆';position:absolute;bottom:1px;right:1px;font-size:8px;color:#c58743;}
.player-glyph {color:#a32ee3;font-size:clamp(14px,2.25vw,26px);line-height:1;text-shadow:0 1px 0 #fff,0 0 5px white,0 0 10px #723dba;filter:drop-shadow(0 2px 2px #0009);}
.pickup {display:grid;place-items:center;width:67%;height:67%;border:1px solid #f0c86f;border-radius:50%;background:#080f24;color:#f5e373;font-size:clamp(10px,1.9vw,23px);font-weight:1000;box-shadow:0 0 10px #fbe788a8,0 3px 5px #0008;}
.pickup-ghost {color:#8acbff;}.pickup-reach {color:#fa91ff;}
.legend {display:flex;flex-wrap:wrap;gap:7px 14px;margin:14px 0 0;align-items:center;}.legend span {font-size:9px;color:#b9cedd;font-weight:850;letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:5px;}.legend-dot {width:12px;height:12px;display:inline-block;border-radius:3px;background:#d4e3e2;border:1px dashed #4dbacb;}.legend-current {background:#b85cea;border:1px solid white;border-radius:100%;}.legend-own {background:#4dafd5;border:1px solid #165fbb;}.legend-item {background:#e7c15b;border:1px solid #f3e499;}
.map-caption {font-size:12px;min-height:3em;color:#d9e7f1;background:#050f22;border:1px solid rgba(94,171,213,.2);padding:10px 12px;border-radius:10px;margin-top:12px;}
.control-heading p {font-size:12px;line-height:1.45;color:#afc6d6;margin:5px 0 0;}
.mode-switch {display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px;}
.mode-btn {padding:12px 5px;color:#d6ebfa;min-height:45px;border-radius:11px;border:1px solid #6caad042;background:#071628;font-size:12px;letter-spacing:.03em;font-weight:900;white-space:nowrap;}
.mode-btn.selected[data-mode="ghost"] {background:linear-gradient(145deg,#164c7a,#123d85);border-color:#4ac3ff;box-shadow:0 0 13px #158cff33;}
.mode-btn.selected[data-mode="reach"] {background:linear-gradient(145deg,#573678,#703174);border-color:#e4a4ff;box-shadow:0 0 13px #c74cce35;}
.mode-btn span {font-size:16px;vertical-align:-1px;}
.stats-row {display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;}
.stat {border-radius:10px;background:#050d1c;border:1px solid rgba(110,149,196,.24);padding:10px;min-width:0;}
.stat span {font-size:9px;letter-spacing:.07em;font-weight:850;color:#a9becd;display:block;}
.stat strong {display:block;color:#fff;font-weight:900;font-size:clamp(14px,2.3vw,20px);margin-top:3px;font-variant-numeric:tabular-nums;}
.control-center {border-top:1px solid #ffffff18;margin-top:15px;padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.control-help {font-size:11px;color:#b1c4d6;max-width:185px;line-height:1.5;margin:5px 0;}
.dpad {display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px);gap:4px;flex-shrink:0;}
.dpad button {border:1px solid #6ffff3a8;background:linear-gradient(#046a60,#014a45);border-radius:8px;color:#e8fff9;font-size:21px;font-weight:900;line-height:1;padding:0;}
.dpad button:active {transform:scale(.95);background:#04a78b;}
.dpad button:disabled {opacity:.32;cursor:not-allowed;transform:none;}
.dpad-center {display:grid;place-items:center;color:#f7a1ff;text-shadow:0 0 10px #ff7cfb;background:#030912;border-radius:8px;font-size:20px;border:1px solid #ad72d9b0;}
.action-panel {margin-top:15px;border-top:1px solid #ffffff18;padding-top:12px;}
.action-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.action-btn {padding:9px 5px;min-height:53px;border:1px solid #f6d36e7a;border-radius:10px;background:linear-gradient(150deg,#583c22,#211809);color:#fff6d4;font-size:12px;font-weight:950;line-height:1.15;white-space:normal;}
.action-btn small {font-size:9px;display:block;margin-top:4px;color:#ffe1a8;letter-spacing:.015em;}
.action-btn:disabled {opacity:.45;filter:saturate(.3);cursor:not-allowed;}
.action-dig {background:linear-gradient(145deg,#674114,#32200f);}
.action-upgrade {background:linear-gradient(145deg,#284c7b,#121f36);border-color:#81c3fa;}
.action-expand {background:linear-gradient(145deg,#245b4a,#10291f);border-color:#70edc8;}
.feedback {border:1px solid #63e2d459;background:rgba(29,120,126,.10);border-radius:10px;padding:11px 12px;margin-top:13px;min-height:52px;color:#bcfff1;font-size:12px;font-weight:700;line-height:1.5;}
.reset-row {display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin-top:11px;color:#d5e5ec;font-size:11px;font-weight:850;}
.reset-btn {border:1px solid #7089a661;color:#dceef7;border-radius:8px;background:transparent;padding:8px 10px;font-size:11px;font-weight:800;}
.demo-guide {padding:44px 0 22px;}.guide-header {max-width:750px;}.guide-header h2{font-size:clamp(1.45rem,3vw,2rem);margin:10px 0;}.guide-header p{margin-top:8px;font-size:14px;}
.guide-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:20px 0;}.guide-cards article{border:1px solid #7eaed246;background:linear-gradient(145deg,#112338,#080f1c);padding:19px;border-radius:15px;min-width:0;}.guide-icon{font-size:26px;color:#fae69a;}.guide-cards h3 {margin:9px 0;color:white;}.guide-cards p {font-size:13px;margin:0;}
.end-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;background:linear-gradient(130deg,rgba(95,57,143,.26),rgba(5,121,116,.16));border:1px solid #9ca5ea54;border-radius:17px;padding:20px;}.end-cta h2{margin:0 0 6px;font-size:1.3rem;}.end-cta p{margin:0;font-size:13px;max-width:530px;}.end-buttons{display:flex;gap:8px;flex-wrap:wrap;}.end-buttons .button{font-size:11px;min-height:39px;}
@media (max-width:960px) {.demo-stage {grid-template-columns:1fr;}.demo-control {display:grid;grid-template-columns:1fr 1fr;gap:12px;}.demo-control>.control-heading {grid-column:1/-1;}.demo-control>.mode-switch,.demo-control>.stats-row,.demo-control>.control-center,.demo-control>.action-panel {margin:0;}.demo-control>.control-center{border-top:0;padding:0;}.demo-control>.action-panel{border-top:0;padding:0;}.demo-control>.feedback,.demo-control>.reset-row{grid-column:1/-1;margin-top:0;}.map-frame{aspect-ratio:1.55/1;}.demo-grid{height:94%;width:auto;max-width:94%;}.guide-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:600px) {.demo-shell{width:min(100% - 16px,480px);}.demo-intro{padding:30px 4px 18px;}.demo-intro h1{font-size:clamp(2rem,10vw,3rem);}.demo-lede{font-size:14px;}.demo-field,.demo-control{border-radius:15px;padding:12px;}.demo-stage{gap:12px;}.map-frame{aspect-ratio:1/1.04;}.demo-grid{height:auto;width:93%;}.demo-control{display:block;}.demo-control>.mode-switch,.demo-control>.stats-row{margin-top:12px;}.demo-control>.control-center{border-top:1px solid #ffffff18;margin-top:12px;padding-top:12px;}.demo-control>.action-panel{border-top:1px solid #ffffff18;margin-top:12px;padding-top:12px;}.demo-control>.feedback,.demo-control>.reset-row{margin-top:12px;}.dpad {grid-template-columns:repeat(3,min(12vw,44px));grid-template-rows:repeat(3,min(10vw,40px));}.guide-cards{grid-template-columns:1fr;}.demo-guide{padding-top:30px;}.road-name{font-size:8px;}.legend{gap:7px;}.legend span{font-size:8px;}.demo-intro .demo-free{font-size:9px;}}
@media (max-width:360px) {.control-center{flex-direction:column;align-items:center;}.control-help{max-width:100%;}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px);}.demo-intro h1{font-size:2rem;}}
@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto;}*{transition:none!important;animation:none!important;}}