:root{
  --bg:#0f1720; --panel:#0b1220; --tile:#1e2a36;
  --text:#e6eef6; --green:#6aaa64; --yellow:#c9b458; --gray:#787c7e;
}
html[data-theme="light"]{
  --bg:#f5f5f5; --panel:#ffffff; --tile:#e8e8e8;
  --text:#ffffff;
}
*{box-sizing:border-box}
body{font-family:serif;color:var(--text);margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8px}
body{background:var(--bg) url('dark_back.png') center/cover no-repeat fixed}
main{width:min(720px,95%);padding:clamp(12px,5vw,24px);background:rgba(0,0,0,0.65);border-radius:8px;}html[data-theme="light"] body{background:var(--bg) url('light_back.png') center/cover no-repeat fixed}
h1{margin:0 0 clamp(8px,2vw,16px);text-align:center;font-size:clamp(1.5rem,6vw,2.5rem)}
/* site logo used in headers */
.site-logo{width:clamp(150px,60vw,400px);height:auto;display:inline-block;vertical-align:middle}

/* Legal / contact styling for home page */
.legal{font-size:13px;color:rgba(230,238,246,0.82);text-align:center;margin-top:18px;line-height:1.4}
.contact-line{font-size:13px;color:rgba(230,238,246,0.82);text-align:center;margin-top:12px}
#grid{display:grid;gap:8px;margin:12px 0}
.row{display:flex;gap:8px;justify-content:center}
.tile{width:48px;aspect-ratio:1;background:var(--tile);display:inline-grid;place-items:center;font-weight:700;border-radius:6px;background-size:cover;background-position:center;background-repeat:no-repeat}
.tile.small{width:36px;aspect-ratio:1}
.green{background:var(--green);color:#fff}
.yellow{background:var(--yellow);color:#fff}
.gray{background:var(--gray);color:#fff}
#grid{display:flex;flex-direction:column;gap:clamp(6px,2vw,8px);margin:clamp(8px,3vw,12px) 0}
.row{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,2vw,8px);align-items:stretch}
.header-row{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,2vw,8px);margin-bottom:clamp(4px,2vw,6px)}
.col-title{padding:clamp(1px,1vw,8px);background:#2a2a2a;border:1px solid white;text-align:center;font-weight:700;font-size:clamp(7px,1.6vw,13px);display:flex;align-items:center;justify-content:center;color:white}
.box{padding:clamp(1px,1vw,10px);background:var(--tile);aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.box.small{padding:clamp(1px,0.8vw,6px);min-height:36px}
.box .value{flex:1;display:flex;align-items:center;justify-content:center;font-size:clamp(0.6rem,1.6vw,1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* allow wrapped text if JS enables it */
.box .value.wrap-allowed{white-space:normal;word-break:break-word;line-height:1.2}
.box .count{position:absolute;right:clamp(1px,0.6vw,6px);bottom:clamp(1px,0.5vw,4px);background:rgba(0,0,0,0.2);padding:clamp(1px,0.4vw,2px) clamp(2px,0.6vw,6px);border-radius:8px;font-size:clamp(6px,1vw,11px)}
.box .arrow{font-size:clamp(9px,1.6vw,14px);margin-left:clamp(2px,0.6vw,6px)}
.box.yellow .arrow{color:inherit;opacity:0.95}
.box.green{background-image:url('green_tile.png');background-size:cover;background-position:center;color:#fff}
.box.yellow{background-image:url('yellow_tile.png');background-size:cover;background-position:center;color:#111}
.box.gray{background-image:url('gray_tile.png');background-size:cover;background-position:center;color:#fff}

.tile.green{background-image:url('green_tile.png')}
.tile.yellow{background-image:url('yellow_tile.png')}
.tile.gray{background-image:url('gray_tile.png')}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
#legend{display:flex;gap:8px;align-items:center;margin-top:8px}
#legend .box{display:inline-flex;align-items:center;gap:6px;padding:6px 10px}
#controls{display:flex;flex-direction:column;gap:clamp(8px,2vw,10px);align-items:stretch}
#controls .control-row{display:flex;gap:clamp(6px,1.2vw,8px);align-items:center}
#controls .control-row input{flex:1}
#controls .giveup-row{display:flex;gap:clamp(6px,1.2vw,8px);align-items:center;justify-content:center}
.confirm-text{color:rgba(230,238,246,0.9);font-weight:600;margin-right:8px}
.confirm-text.hidden{display:none}
#guessInput{padding:clamp(5px,1.5vw,8px);border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:#071223;color:var(--text);font-size:clamp(11px,2.2vw,16px)}
button{padding:clamp(4px,1.2vw,8px) clamp(6px,1.2vw,12px);border:1px solid white;background:#2a2a2a;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,1.6vw,14px);border-radius:4px}

/* custom in-game dropdown */
#controls{}
.name-dropdown{position:fixed;background:rgba(0,0,0,0.65);border:1px solid rgba(255,255,255,0.12);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.9);z-index:9999;padding:0;overflow:hidden;min-width:200px;left:0;top:0}
.name-dropdown.hidden{display:none}
.name-dropdown .header{position:sticky;top:0;background:rgba(0,0,0,0.65);padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px;color:var(--text);font-weight:600}
.name-dropdown .list{max-height:calc(var(--tile-size,48px) * 2.5);overflow:auto}
.name-dropdown .item{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,0.02);cursor:pointer;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,0.65)}
.name-dropdown .item:hover,.name-dropdown .item.active{background:rgba(255,255,255,0.03)}
.name-dropdown .no-results{padding:6px;color:rgba(230,238,246,0.6);font-size:12px;background:rgba(0,0,0,0.65)}
.action-btn{padding:clamp(4px,1.2vw,8px) clamp(6px,1.2vw,12px);border:0;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:auto;font-size:clamp(10px,1.6vw,14px);border-radius:4px}
.giveup-btn{background:#d64545}
.share-btn{background:#2ecc71}
#message{min-height:24px;margin:8px 0}
.hidden{display:none}
footer{margin-top:12px;font-size:12px;color:rgba(230,238,246,0.7)}

@media (max-width:768px){
  main{width:min(100vw,100%)}
  #instructions{font-size:clamp(13px,3vw,16px)}
}
@media (max-width:480px){
  body{padding:4px}
  main{padding:clamp(10px,4vw,16px)}
  h1{margin-bottom:clamp(6px,2vw,12px)}
  #grid{gap:clamp(4px,1.5vw,6px)}
  .row{gap:clamp(4px,1.5vw,6px)}
  .header-row{gap:clamp(4px,1.5vw,6px)}
  #legend{flex-direction:column;gap:clamp(4px,2vw,8px)}
}
/* toast for copy feedback */
.w-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:rgba(0,0,0,0.8);color:#fff;padding:8px 12px;border-radius:8px;opacity:0;transition:opacity 180ms ease,transform 180ms ease;z-index:9999}
.w-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.w-toast.hide{opacity:0}
/* info modal */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-content{background:#0b1220;color:#e6eef6;padding:clamp(16px,5vw,24px);border-radius:8px;max-width:90vw;width:90%;box-shadow:0 4px 6px rgba(0,0,0,0.3);position:relative;max-height:80vh;overflow-y:auto;font-size:clamp(12px,3vw,16px)}
.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#e6eef6;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{opacity:0.7}
.modal-content p{line-height:1.6;margin:0 0 12px}