*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:0 16px 48px;background:#f4f1ea;color:#222;line-height:1.5;font-size:16px}
.container{max-width:760px;margin:0 auto}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;flex-wrap:wrap}
.header h1{margin:0;font-size:2rem}
.tagline{margin:4px 0 0;color:#666}
.scores{display:flex;gap:8px;flex-wrap:wrap}
.score-box{background:#fff;border:1px solid #ddd;border-radius:8px;padding:8px 12px;text-align:center;min-width:64px}
.score-box span{display:block;font-size:.8rem;color:#666}
.score-box strong{font-size:1.2rem}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:8px 0 16px}
.controls button,.win-panel button{background:#2fae4e;color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:16px;min-height:44px}
.controls button:active,.win-panel button:active{transform:scale(.97)}
.difficulty{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:#666}
.difficulty select{height:44px;padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:16px;color:#222}
.message{min-height:24px;margin:8px 0;color:#666}
.message.error{color:#b00020}
.win-panel{background:#e6f4ea;border:1px solid #2fae4e;border-radius:10px;padding:12px 16px;margin:0 0 16px}
.win-panel p{margin:0 0 10px}
.tubes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:8px 0 16px}
.tube-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.tube{width:56px;height:188px;padding:0;background:transparent;border:3px solid #444;border-top:none;border-radius:0 0 18px 18px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.tube.selected{transform:translateY(-14px);border-color:#2fae4e;box-shadow:0 6px 12px rgba(0,0,0,.2)}
.tube.complete{border-color:#2fae4e;box-shadow:0 0 0 3px #2fae4e}
.tube:disabled{cursor:default;opacity:.85}
/* Each layer is its own rounded square, not one big block: a small
   gap plus a grey outline around every segment, so two layers of
   the same colour are still visibly two layers. */
.tube .slot{flex:1 1 0;width:calc(100% - 6px);margin:2px 3px;border:1px solid #888;border-radius:8px}
.tube .slot:last-child{border-radius:8px}
.tube-number{font-size:.85rem;color:#666}
.help{color:#555;max-width:640px}
@media(max-width:600px){
  body{padding-left:12px;padding-right:12px}
  .header h1{font-size:1.6rem}
  .tube{width:48px;height:168px}
  .tubes{gap:10px}
  .score-box{min-width:56px;padding:6px 8px}
}
@media(prefers-color-scheme:dark){
  body{background:#121212;color:#e8e8e8}
  .tagline,.message,.help,.tube-number,.difficulty{color:#aaa}
  .score-box{background:#1e1e1e;border-color:#333}
  .difficulty select{background:#222;border-color:#333;color:#e8e8e8}
  .tube{border-color:#ccc}
  .win-panel{background:#1e2a1e;border-color:#2fae4e}
}