:root{color-scheme:dark;--ink:#eef5f4;--gold:#f2cc81;--green:#3ae0ac}*{box-sizing:border-box}body{margin:0;background:#0d1821;color:var(--ink);font-family:Inter,Arial,sans-serif;background-image:radial-gradient(ellipse at 50% 0,#1a3840 0,transparent 65%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;font-weight:600;border:1px solid #597179;background:#243b46;border-radius:10px;padding:11px 17px;color:#f9fcfc;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#36545d;transform:translateY(-1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #f7cf7b;outline-offset:3px}header{height:74px;border-bottom:1px solid #ffffff14;display:flex;align-items:center;justify-content:space-between;padding:0 4%}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#e8c57f;font-size:32px}.brand span{font-size:19px;letter-spacing:3px;color:#fff}.brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:6px;color:#a9c0c5}nav{display:flex;gap:10px}nav button{font-size:13px}nav button:first-child{background:transparent;border-color:#ffffff25}main{max-width:1480px;margin:auto;padding:22px 30px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#70d6bc;margin:0 0 7px}h1{font-size:36px;font-weight:650;letter-spacing:-1.2px;margin:0 0 6px}.sub{color:#bed0d5;font-size:13px;margin:0}.sub span{margin:0 8px;color:#6b8f91}aside{text-align:right}.live{font-size:10px;letter-spacing:1.5px;color:#68ebbe;border:1px solid #4ea58e66;background:#164b3b;padding:8px 12px;border-radius:20px}aside p{font-size:12px;color:#b6cfd1;margin:15px 0 0}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:1.5px;color:#d0e1e3}.toolbar b{font-weight:500;letter-spacing:0;color:#8fbab3;border-left:1px solid #577672;padding-left:14px;margin-left:14px}.toolbar button{font-size:12px;background:transparent;border:0;color:var(--gold);padding:8px}.table{height:clamp(290px,40vh,410px);border-radius:24px;background:radial-gradient(ellipse at 50% 40%,#187764,#0d5248 75%);box-shadow:inset 0 0 0 7px #253f40,inset 0 0 0 9px #6f8c76,0 16px 45px #0004;position:relative;color:white;overflow:hidden}.table:before{content:'';position:absolute;inset:19px;border:1px solid #a2d3b52d;border-radius:14px;pointer-events:none}.player{position:absolute;text-align:center;font-size:14px;font-weight:600;z-index:1}.player small{display:block;font-size:10px;letter-spacing:1px;color:#b9e0d4;margin:7px}.north{top:22px;left:50%;transform:translateX(-50%)}.west{left:24px;top:34%}.east{right:24px;top:34%}.avatar{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid #c0e4d880;border-radius:50%;background:#a5e7ce20;margin:0 6px;color:#f8e2aa;font-weight:600}.backs{display:flex;gap:2px;justify-content:center;margin:8px 0}.back{width:10px;height:22px;border-radius:3px;border:1px solid #a6dac2;background:repeating-linear-gradient(45deg,#449f83,#449f83 3px,#3a8a72 3px,#3a8a72 6px);box-shadow:0 2px 0 #0c3d30}.west .backs,.east .backs{max-width:112px;flex-wrap:wrap;margin:auto}.center{position:absolute;top:103px;left:50%;transform:translateX(-50%);text-align:center;width:62%}.center>small{font-size:10px;letter-spacing:2px;color:#d7ece2}.compass{font-family:serif;font-size:28px;color:#f1d28c;width:44px;height:44px;display:grid;place-items:center;margin:8px auto;background:#083e36;border:1px solid #e5d29a66;border-radius:10px}#status{font-size:16px;font-weight:600;min-height:20px;color:#fff}#wall{font-size:12px;color:#cce7da;display:block;margin:6px}#claims{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;position:relative;z-index:3}#claims button{background:#ffda8f;border:0;font-size:13px;color:#153b31;padding:9px 12px;box-shadow:0 3px 10px #0003}.river{position:absolute;left:18%;right:18%;top:235px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px;max-height:78px;overflow:auto}.you{position:absolute;bottom:19px;left:24px;display:flex;align-items:center;font-size:13px;gap:6px}.you small{display:block;font-size:9px;letter-spacing:1px;color:#badcce;margin-top:4px}#flowers{font-size:12px;color:#f6d68f;margin-left:10px}.rack{background:linear-gradient(160deg,#f8f8ef,#e4ecdf);color:#14362e;border-radius:17px;margin:13px 0 14px;padding:15px 20px 12px;border:1px solid #ffffff80;box-shadow:0 10px 25px #0003}.racktop{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:1.5px;margin-bottom:10px}.racktop small{display:block;font-size:12px;letter-spacing:0;font-weight:500;color:#456254;margin-top:5px}.racktop>div{display:flex;gap:7px}.racktop button{font-size:12px;padding:10px 13px;letter-spacing:0;background:#fff;color:#183e32;border-color:#b3c6b7}.racktop .gold{background:#155c45;color:white;border-color:#155c45}#discard{background:#e6ba62;color:#14382b;border-color:#d1a348}#hand{display:flex;gap:5px;justify-content:center;padding:10px 0 1px;flex-wrap:nowrap}.tile{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:clamp(37px,4.4vw,66px);height:clamp(65px,6.3vw,96px);padding:3px 3px 2px;border:1px solid #bbc8b9;border-bottom:6px solid #679879;border-radius:7px;background:linear-gradient(115deg,#fffef9,#f2f1e5);color:#163b30;box-shadow:0 3px 4px #123c3028;font-family:serif;flex-shrink:0;position:relative}.tile .glyph{display:flex;align-items:center;justify-content:center;width:100%;height:calc(100% - 15px)}.glyph svg{width:100%;height:100%;display:block}.tile small{font:10px Arial,sans-serif;color:#344f40;white-space:nowrap}.tile:hover:not(:disabled){background:#fff;transform:translateY(-5px)}.tile:disabled{opacity:1;filter:brightness(.95)}.tile.selected{transform:translateY(-10px);outline:3px solid #b07817;box-shadow:0 7px 12px #0003;background:#fff6d9}.tile.hinted{outline:3px dashed #b07817}.tile.mini{width:28px;height:39px;border-bottom-width:3px;box-shadow:0 1px 2px #0003;border-radius:3px;padding:1px}.tile.mini .glyph{height:100%}.tile.mini small{display:none}#melds{display:flex;gap:14px}#melds>span{display:flex;gap:2px;padding-bottom:6px}.footnote{text-align:center;font-size:11px;color:#476553;margin:9px 0 0;line-height:1.4}.below{display:none}footer{max-width:1480px;margin:auto;padding:12px 30px 20px;font-size:10px;letter-spacing:2px;color:#9fb9bf;display:flex;gap:20px;justify-content:space-between}footer span,footer small{letter-spacing:0;color:#a6bcc0}dialog{border:1px solid #506f6e;border-radius:18px;background:#edf3e9;color:#173e31;padding:30px;max-width:530px;width:90%;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#061a21d9}dialog h2{font-size:27px}dialog p,dialog li{font-size:14px;line-height:1.8}dialog .eyebrow{color:#2d755f}dialog button{background:#155c45}.close{float:right;border:0;color:#173e31;background:transparent}
@media(min-width:1000px) and (max-height:850px){header{height:62px}main{padding-top:15px}.intro{margin-bottom:12px}h1{font-size:29px}.table{height:300px}.river{top:225px;max-height:42px}.rack{margin-top:10px}.tile{height:83px}.you{bottom:15px}.center{top:100px}.compass{height:36px;margin:6px auto;font-size:25px}}
@media(max-width:700px){header{height:64px;padding:0 16px}.brand{font-size:26px;gap:7px}.brand span{font-size:14px;letter-spacing:2px}.brand small{font-size:7px;letter-spacing:1.6px}nav{gap:5px}nav button{font-size:11px;padding:9px}main{padding:16px 10px 0}.intro{margin-bottom:13px}h1{font-size:27px}.eyebrow{font-size:8px;letter-spacing:1.5px}.sub{font-size:11px}.intro aside p{display:none}.live{font-size:8px;padding:7px;letter-spacing:.7px}.toolbar{font-size:9px;letter-spacing:1px}.toolbar b{display:none}.table{height:310px;border-radius:18px}.table:before{inset:14px}.player{font-size:12px}.player small{font-size:8px;margin:5px}.north{top:19px}.west{left:14px;top:35%}.east{right:14px;top:35%}.west .backs,.east .backs{max-width:38px;gap:2px}.backs .back{width:6px;height:13px}.avatar{width:26px;height:26px;margin:0 3px}.center{top:94px;width:66%}.center>small{font-size:8px;letter-spacing:1px}.compass{height:35px;width:35px;font-size:25px;margin:8px auto}#status{font-size:13px;line-height:1.5}#wall{font-size:11px}.river{top:215px;left:16%;right:16%;max-height:43px;gap:3px}.tile.mini{width:24px;height:34px}.you{bottom:18px;left:20px;font-size:11px}.you small{font-size:8px}#flowers{font-size:11px}.rack{padding:13px 9px 11px;border-radius:13px}.racktop{font-size:10px;flex-wrap:wrap;gap:12px}.racktop>div{width:100%;display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:5px}.racktop button{padding:11px 5px;font-size:11px}.racktop small{display:inline;margin-left:9px;font-size:11px}.tile{width:calc((100vw - 62px)/9);height:calc((100vw - 62px)/9 * 1.48);min-height:55px;max-height:78px;border-bottom-width:4px;border-radius:5px;padding:1px}.tile small{font-size:8px}.tile .glyph{height:calc(100% - 11px)}#hand{flex-wrap:wrap;gap:5px 3px;max-width:600px;margin:auto;padding-top:8px;row-gap:12px}.tile.selected{transform:translateY(-6px)}.footnote{font-size:10px;margin-top:10px}footer{padding:8px 14px 18px;flex-wrap:wrap;gap:7px}footer span{display:none}}
@media(max-width:700px) and (orientation:landscape){.intro{display:none}.table{height:240px}.north{top:15px}.center{top:70px}.river{top:180px}.racktop>div{width:auto;display:flex}.racktop{flex-wrap:nowrap}#hand{flex-wrap:nowrap;max-width:none}.tile{width:calc((100vw - 105px)/17);height:65px}.table .you{bottom:12px}.racktop small{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Give the top player's tiles and round label separate space. */
.center{top:117px}
@media(min-width:1000px) and (max-height:850px){.center{top:113px}.compass{height:30px;margin:4px auto}}
@media(max-width:700px){.center{top:100px}}
@media(max-width:700px) and (orientation:landscape){.center{top:87px}.compass{height:25px;margin:3px auto;font-size:21px}.center>small{display:none}}
/* Prominent out-of-turn claim decision */
#claims.claim-open{position:fixed;inset:0;z-index:50;background:#061b21b8;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:20px}
.claim-head{width:min(440px,92vw);display:flex;align-items:center;justify-content:center;gap:22px;padding:20px 24px;background:#f2f5e9;color:#133c31;border:3px solid #f0c56d;border-radius:18px 18px 0 0;box-shadow:0 18px 60px #0008;margin-bottom:-15px}
.claim-copy{text-align:left;display:flex;flex-direction:column;gap:6px}.claim-copy strong{font-size:21px}.claim-copy span{font-size:13px;color:#476a5e}.claim-tile.tile{width:86px;height:120px;min-width:86px;outline:5px solid #f2c45f;box-shadow:0 0 0 8px #fff,0 10px 30px #0005;animation:claim-pulse 1.4s ease-in-out infinite}.claim-tile.tile small{font-size:12px;font-weight:700}.claim-actions{width:min(440px,92vw);display:grid;grid-template-columns:repeat(2,1fr);gap:9px;background:#f2f5e9;padding:18px 20px 20px;border-radius:0 0 18px 18px;box-shadow:0 18px 60px #0008}.claim-actions button{min-height:50px;font-size:15px}.claim-action{background:#12694d!important;color:#fff!important;border:2px solid #0b4c38!important}.claim-skip{background:#fff!important;color:#244c40!important;border:2px solid #9bb2a6!important;grid-column:1/-1}.river .tile:last-child{outline:3px solid #ffd273;box-shadow:0 0 0 4px #ffffff90,0 0 18px #ffd273}.claim-open~.river .tile:last-child{animation:river-pulse 1.3s ease-in-out infinite}@keyframes claim-pulse{50%{transform:scale(1.055);box-shadow:0 0 0 8px #fff,0 0 34px #ffd573}}@keyframes river-pulse{50%{transform:scale(1.18)}}
@media(max-width:700px){.claim-head{padding:16px 20px}.claim-copy strong{font-size:18px}.claim-tile.tile{width:72px;height:100px;min-width:72px}.claim-actions{padding:15px}.claim-actions button{font-size:14px;min-height:48px}}
/* Mobile action controls inspired by the supplied iPhone reference */
.score{display:block;font-size:10px;color:#f2cc81;margin:4px 0}.action-dock{max-width:660px;margin:12px auto;display:grid;grid-template-columns:86px 1fr;gap:9px;align-items:center}.action-dock>button,.meld-actions button{font-family:Georgia,serif;letter-spacing:1px;font-size:15px;min-height:48px;background:#1b2539;border:2px solid #7661ba;color:#fff}.action-dock>button:first-child{grid-column:1/-1;width:220px;justify-self:center;border-color:#a99ced;font-size:17px}.meld-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.meld-actions button:nth-child(2){border-color:#bf8751}.skip-action{border-radius:50%!important;width:70px;height:70px;padding:0!important;background:#a9863e!important;border-color:#e4c16c!important}.action-dock button:disabled{opacity:.3}.action-dock button:not(:disabled){box-shadow:0 0 18px #8e6cdd44}#actionStatus{background:#151f2d;border:1px solid #57617a;border-radius:12px;min-height:48px;display:grid;place-items:center;text-align:center;padding:8px;color:#d7c9ff;font-weight:600;font-size:13px}.sort-options{display:grid;gap:12px}.sort-options button{min-height:58px;background:#233b42;color:#fff;font-family:Georgia,serif;font-size:19px}.player.current,.you.current{outline:3px solid #e5c56e}
@media(min-width:701px){.action-dock{display:none}}
@media(max-width:700px){header{position:sticky;top:0;z-index:20;background:#0d1821}.intro{display:none}.toolbar{margin-top:2px}.table{height:365px}.north{border:1px solid #bad7cb;border-radius:14px;padding:5px 9px;min-width:160px}.west,.east{border:1px solid #bad7cb;border-radius:14px;padding:8px 5px}.center{top:120px}.river{top:232px;max-height:72px}.you{right:14px;left:14px;border:2px solid #e3c36f;border-radius:14px;padding:6px 9px;bottom:13px;background:#063f36}.action-dock{padding:0 7px}.rack{margin-top:8px}.racktop>div{grid-template-columns:1fr 1.35fr}.racktop #win{display:none}.racktop button{min-height:42px}.racktop>span{width:100%}}
/* Desktop clarity pass: defined zones, no floating/overlapping content */
@media(min-width:701px){
 body{font-weight:500}.table{height:480px;background:linear-gradient(145deg,#0b6658,#084b43);box-shadow:inset 0 0 0 8px #142f32,inset 0 0 0 10px #8aa38c,0 20px 50px #0005}
 .table:before{inset:22px;border-color:#b7dec94d}
 .player{background:#092f2d;border:1px solid #8cb7a7;border-radius:14px;padding:10px 14px;box-shadow:0 7px 18px #001e1a66;min-width:170px;color:#fff}
 .north{top:20px}.west{left:34px;top:176px}.east{right:34px;top:176px}.player small{color:#cde8df;font-weight:700}.score{color:#ffd77f;font-weight:700}
 .backs{margin-top:9px}.back{width:9px;height:20px}
 .center{top:112px;width:520px;z-index:3;background:#073e38;border:1px solid #4d8b7c;border-radius:14px;padding:10px 16px;box-shadow:0 8px 20px #002a2466}
 .center>small{font-weight:700;color:#a9d8cb}.compass{position:absolute;left:14px;top:12px;margin:0}.center #status{font-size:17px;line-height:1.35;margin-left:48px;margin-right:48px}.center #wall{color:#d8eee8;font-weight:700}
 .river{left:50%;right:auto;top:218px;transform:translateX(-50%);width:522px;height:174px;max-height:none;overflow:hidden;display:grid;grid-template-columns:repeat(12,38px);grid-auto-rows:49px;align-content:start;justify-content:center;gap:6px;padding:12px;background:#063b36;border:1px solid #4e897d;border-radius:15px;box-shadow:inset 0 2px 12px #001d19b8}
 .river:empty:before{content:'DISCARDS';grid-column:1/-1;align-self:center;text-align:center;color:#81aa9f;font-size:11px;letter-spacing:2px;padding-top:60px}
 .river .tile.mini{width:38px;height:49px;border:1px solid #cbd3c5;border-bottom:4px solid #77a07e;border-radius:5px;background:#fffef3;outline:none;box-shadow:0 2px 4px #001d1877}
 .river .tile.mini:last-child{outline:3px solid #ffd266;box-shadow:0 0 0 3px #fff6,0 0 14px #ffd266}
 .you{left:34px;right:34px;bottom:22px;transform:none;background:#092f2d;border:2px solid #e4c56f;border-radius:14px;padding:9px 14px;min-height:54px;box-shadow:0 7px 18px #001e1a66}
 .you #flowers{margin-left:auto;color:#ffd77f;font-weight:700}
 .rack{padding:17px 24px 15px;margin-top:15px}.racktop{margin-bottom:10px}.racktop>span{font-size:12px}.racktop small{font-size:13px;color:#315447}
 #hand{gap:7px;padding-top:12px}.tile{border-color:#9eac9b;box-shadow:0 3px 0 #628b6b,0 6px 10px #17382d24}.tile small{font-size:10px;font-weight:700;color:#233e34}
 .footnote{font-size:12px;font-weight:600;color:#3f5d51}
}
@media(min-width:701px) and (max-height:900px){.table{height:440px}.west,.east{top:158px}.river{top:204px;height:148px;grid-auto-rows:43px}.river .tile.mini{height:43px}.you{bottom:17px}.rack{padding-top:12px}.tile{height:82px}.center{top:102px}}
/* English-first visible tiles and claim context */
#claims.claim-open{backdrop-filter:blur(2px);overflow:auto;justify-content:flex-start;padding-top:max(22px,5vh)}
.claim-head,.claim-hand-preview,.claim-actions{width:min(900px,94vw)}
.claim-head{border-radius:18px 18px 0 0;margin-bottom:-15px}.claim-hand-preview{background:#f2f5e9;color:#183e33;padding:18px 20px 15px;border-top:1px solid #c7d3c6}.claim-hand-preview>strong{font-size:15px;letter-spacing:1px;text-transform:uppercase}.claim-hand-preview>span{font-size:12px;color:#587267;margin-left:10px}.claim-hand-tiles{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:13px}.claim-hand-tile.tile{width:45px;height:66px;min-width:45px;border-bottom-width:4px;box-shadow:0 2px 3px #173f3625}.claim-hand-tile.tile small{display:block;font-size:8px;font-weight:700}.claim-hand-tile.related{outline:3px solid #d99d25;background:#fff6d8}.claim-actions{grid-template-columns:repeat(3,1fr)}.claim-skip{grid-column:1/-1}
#river .tile.mini,#melds .tile.mini{display:inline-flex;flex-direction:column;height:58px;width:45px;padding:2px;border-bottom-width:4px}#river .tile.mini .glyph,#melds .tile.mini .glyph{height:43px}#river .tile.mini small,#melds .tile.mini small{display:block;font:700 7px Arial,sans-serif;color:#263f36;line-height:9px;white-space:nowrap}#melds{align-items:flex-start;gap:18px}#melds>span{background:#dce7d8;border:1px solid #b4c4b2;border-radius:7px;padding:5px;gap:3px}
@media(min-width:701px){.river{grid-template-columns:repeat(10,45px);grid-auto-rows:58px;width:522px;height:174px;gap:5px;padding:11px}.river .tile.mini{width:45px;height:58px}.river .tile.mini .glyph{height:43px}.claim-actions{border-radius:0 0 18px 18px}}
@media(max-width:700px){#claims.claim-open{padding:10px 7px}.claim-head,.claim-hand-preview,.claim-actions{width:98vw}.claim-head{padding:12px 16px}.claim-tile.tile{width:66px;height:92px;min-width:66px}.claim-hand-preview{padding:12px 8px}.claim-hand-preview>span{display:block;margin:4px 0}.claim-hand-tiles{gap:4px;margin-top:8px}.claim-hand-tile.tile{width:calc((96vw - 55px)/9);min-width:31px;height:54px}.claim-hand-tile.tile .glyph{height:41px}.claim-hand-tile.tile small{font-size:6.5px}.claim-actions{padding:10px;gap:6px}.claim-actions button{font-size:12px;min-height:44px}#river .tile.mini{width:31px;height:44px}#river .tile.mini .glyph{height:32px}#river .tile.mini small{font-size:6px;line-height:7px}.river{max-height:101px}}
/* Manual tile ordering with mouse or touch */
#hand .tile{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}#hand .tile:active{cursor:grabbing}#hand .tile.dragging{opacity:.55;transform:translateY(-8px) scale(.96);z-index:4}.tile.drop-target{outline:4px solid #29a6d6!important;transform:translateY(-7px)}
/* Keep every completed discard row visible above the local-player panel. */
@media(min-width:701px){
  .table{height:520px}
  .river{height:214px;max-height:214px;overflow:hidden}
}
@media(min-width:701px) and (max-height:900px){
  .table{height:480px}
  .river{top:204px;height:202px;max-height:202px;grid-auto-rows:58px}
  .river .tile.mini{height:58px}
}
@media(max-width:700px){
  .river{overflow-y:auto;scrollbar-width:thin}
}
/* Free on-device Mahjong hand helper */
#helper{max-width:1050px;width:min(1050px,96vw);max-height:92vh;overflow:auto;padding:28px;background:#edf3e9}#helper h2{margin:5px 0 6px}.helper-head>p:last-child{color:#527064;margin-top:3px}.helper-upload{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:2px dashed #8aa698;border-radius:14px;padding:16px;margin:18px 0}.helper-upload label{display:flex;flex-direction:column;gap:5px}.helper-upload label span{font-size:12px;color:#5b746a}.helper-upload input{grid-column:1/-1}.helper-upload img{grid-column:1/-1;width:100%;max-height:290px;object-fit:contain;background:#163d35;border-radius:10px}.helper-upload button{grid-column:1/-1}.helper-summary{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.helper-summary>div{display:flex;gap:7px}.helper-summary button{padding:8px 11px}.detected-crops{display:flex;flex-wrap:wrap;gap:5px;padding:10px;background:#173f37;border-radius:12px}.detected-crops p{width:100%;color:#dcebe5;margin:2px 4px 8px;font-size:12px}.detected-crops canvas{width:43px;height:55px;object-fit:cover;border:2px solid #d9e1d4;border-radius:4px;background:#fff}.helper-hand{min-height:105px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;margin:12px 0;padding:12px;border:1px solid #b6c8bb;border-radius:12px;background:#dce8da}.helper-hand .tile,.tile-picker .tile{width:48px;height:70px;border-bottom-width:4px}.helper-hand .tile small,.tile-picker .tile small{font-size:8px}.empty-hand{color:#6a8178;font-size:13px}.helper-instruction{text-align:center!important;color:#527064}.tile-picker{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;justify-items:center}.tile-picker .tile{padding:2px}.helper-analyse{width:100%;margin:18px 0 8px;background:#155c45!important;min-height:52px}.helper-results{margin-top:10px}.result-card{background:#fff;border:1px solid #b6cabd;border-left:6px solid #34765d;border-radius:12px;padding:18px}.result-card>span{display:block;font-size:10px;letter-spacing:2px;color:#337058}.result-card>strong{display:block;font-size:22px;margin:7px 0}.result-card.warn{border-left-color:#c38b2c}.result-card.win{border-left-color:#1d8c5d}.result-card small{display:block;color:#60776d;margin-top:12px;line-height:1.5}.path-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.path-list>div{display:flex;align-items:center;justify-content:space-between;border:1px solid #d0ddd2;border-radius:8px;padding:7px}.path-list .tile.mini{vertical-align:middle;margin-right:3px}.path-list b{font-size:11px;color:#31634f;white-space:nowrap}
@media(max-width:700px){nav{gap:3px}nav button{padding:8px 6px;font-size:9px}#helper{padding:18px 10px;width:98vw}.tile-picker{grid-template-columns:repeat(7,1fr);gap:3px}.helper-hand .tile,.tile-picker .tile{width:calc((90vw - 35px)/7);height:62px}.path-list{grid-template-columns:1fr}.detected-crops canvas{width:34px;height:45px}}
.detected-crops .crop-slot{position:relative;padding:2px;background:#102f2a;border:2px solid #86a89b;border-radius:7px;min-width:47px}.detected-crops .crop-slot canvas{display:block;width:43px;height:59px}.detected-crops .crop-slot span{position:absolute;right:1px;bottom:1px;max-width:calc(100% - 2px);overflow:hidden;text-overflow:ellipsis;background:#173f37;color:#fff;border-radius:4px;padding:2px 4px;font:700 9px Arial,sans-serif;white-space:nowrap}.detected-crops .crop-slot.active{outline:4px solid #f2bd4e;transform:translateY(-3px)}.detected-crops .crop-slot.assigned{border-color:#42d092}.detected-crops .crop-slot.assigned span{background:#137054}.detected-crops>.crop-slot:hover{background:#214f45}